CODEWITHSUNDEEP
csshtmlscroll
MPelletier
MPelletier

Reputation: 16677

How to make a div take all the remaining height AND display its scroll bar without making the browser have one too

I'm trying to combine different questions into a single answer yet none seem to do exactly what I'd like.

Given a div "container" with a div "spacer" of fixed height, another div "data" would take up a maximum of the remaining height of its parent, not break its parent's V-scroll, nor the browser's but instead have its own V-scroll only. Sounds simple enough.

<div id="container">
    <div id="spacer">spacer</div>
    <div id="data">
        text<br/>
        text<br/>
        text<br/>
        ...
    </div>
</div>

CSS:

html, body, #container { height:100% }
#spacer { height: 50px; }
#data
{ 
  overflow-y: scroll;
  height: 100%;
}

JSFiddle example (gone wrong)

I keep breaking the V-scroll on the page (probably because the parent gets as high as the page, yet is shifted down by the fixed height.

Upvotes: 1

Views: 2358

Answers (2)

Serlite
Serlite

Reputation: 12258

Here's a solution which utilizes some absolute/relative positioning, if you don't mind using it.

The HTML structure remains the same (based on your JSFiddle). However, I did change/add to your CSS definitions, so they ended up looking like this (the margin:0 is just so the body isn't rendered with unwanted spacing around it):

html, body{
    margin:0;
    height:100%;
}
#container {
    height:100%
    position: relative;
}
#spacer {
    height: 50px;
}
#data {
    overflow-y: scroll;
    position:absolute;
    top:50px;
    bottom:0;
    left:0;
    width:100%;
}

This will allow #data to expand vertically to fill all the space that #spacer does not already take in #container. However, it will only go as far as a bottom of #container, which in this case is the bottom of the viewport (due to height:100%). Any additional content will scroll inside the #data element. Note that this only works if you know the exact or relative height of the #spacer element, which you seem to know here.

Here's an updated JSFiddle showing what this achieves. If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!

Upvotes: 3

fred02138
fred02138

Reputation: 3361

height:100% doesn't work here. Add this line to your onload routine (the 55 accounts for your header):

document.getElementById("container").style.height=document.body.clientHeight-55 +"px"

Also, set css body {overflow:hidden}

Upvotes: 0

Related Questions