CODEWITHSUNDEEP
css
Ran ST
Ran ST

Reputation: 67

100% height is making div overflow

this question is probably pretty common, as i've been going over answers here for the past 3 hours. and still, no success.

I have a parent html which takes 100% height of the page. the body takes also 100% of the page. In the body element i have 3 divs. i have the 3rd and last one, to take the rest of the page and leave no whitespace after it (which it does now).

tried height: 100%; on the last div and overflow: hidden; on the body element. this just stratches my page and removes the scroll bar (but the website still scrolls O_O ).

please help.

edit: it seems the question itself isn't clear. I want the last div to take the rest of the page height to the end of it.

    #div1{
   max-height: 150px;
}
 #div2{
    max-height: 150px;
}
    #div3{
    padding: 10px 0;
    margin: 0;
    height: 100%;
}

all nested inside a body element which is nested inside html element.

I also have hidden info which is required to show when i click.. so i do need the page to stratch, if any more info is added to the page (hiding overflow on the entire document is going to be a problem than)

Upvotes: 0

Views: 57

Answers (1)

Sachin
Sachin

Reputation: 765

Maybe try this code:

<body>
   <div id="container" style="height: 100%"; overflow="hidden">
      <div>
          asas
      </div>
      <div>
          sdsd
      </div>
      <div>
           wewe
      </div>
   </div>
</body>

Upvotes: 2

Related Questions