CODEWITHSUNDEEP
jqueryhtmlcss
Ari.stat
Ari.stat

Reputation: 472

html with two column one fixed depending on content height

I am building my website and I am not able to create two columns and set left-column position fixed only when its content is out of flow. This is my code

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* LEFT */
.sidenav {
  float: left;
  width: 50%; 
  top: 60px;
  position: fixed;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/*RIGHT*/
.main {
  margin-left: 50%;
  margin-right: 0;
  font-size: 15px; 
}
/* CSS */
</style>
</head>
<body>
<div class="row">
<div class="sidenav" id="Homeleft" align="justify">
<p> Albert Einstein (/ˈaɪnstaɪn/ EYEN-styne;[4] German: [ˈalbɛʁt ˈʔaɪnʃtaɪn] (About this soundlisten); March 14, 1879 – April 18, 1955) was a German-born theoretical physicist[5] who developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).
</div><!-- Homeleft -->

<div class="main" id="Homeright" align="justify">
<p> Albert Einstein (/ˈaɪnstaɪn/ EYEN-styne;[4] German: [ˈalbɛʁt ˈʔaɪnʃtaɪn] (About this soundlisten); March 14, 1879 – April 18, 1955) was a German-born theoretical physicist[5] who developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[3][6]:274 His work is also known for its influence on the philosophy of science.[7][8] He is best known to the general public for his mass–energy equivalence formula {\displaystyle E=mc^{2}}E = mc^2, which has been dubbed "the world's most famous equation".[9] He received the 1921 Nobel Prize in Physics "for his services to theoretical physics, and especially for his discovery of the law of the photoelectric effect",[10] a pivotal step in the development of quantum theory.

The son of a salesman who later operated an electrochemical factory, Einstein was born in the German Empire but moved to Switzerland in 1895 and renounced his German citizenship in 1896.[5] Specializing in physics and mathematics, he received his academic teaching diploma from the Swiss Federal Polytechnic School (German: eidgenössische polytechnische Schule, later ETH) in Zürich in 1900. The following year, he acquired Swiss citizenship, which he kept for his entire life. After initially struggling to find work, from 1902 to 1909 he was employed as a patent examiner at the Swiss Patent Office in Bern.</p>

</div><!-- HomerightContent -->
</div>
</body>
</html>

In this code, I set the left column fixed. But sometimes, the content may be out of flow and I change the position. For example, I can change the settings if my device screen is less than 430px as follow.

   @media screen and (max-height: 430px) {
     .sidenav {
        position: static;
        /* other changes */
      }
    }

However, this is not really what I want to do. I want for example to use a variable to measure the height of the left-column content and change the position to static and make other changes only when this height is greater than the screen height. Any idea?

Upvotes: 0

Views: 37

Answers (1)

Ahmed Moayad AlMoghrabi
Ahmed Moayad AlMoghrabi

Reputation: 1277

You can do so by using jquery, you need to grab the element you want to know its height and consider it to apply whatever you want, this also will be used for you when window resize... Here is a sample code:

function handleMyDivPosition() {
    var height = $(“#div-i-want-height”).height();
    if(height > 111) {
        // position fixed
    } else {
        // position absolute
    }
}
$(window).on(”resize”,function () {
    handleMyDivPosition();
}).resize();

Upvotes: 1

Related Questions