Menu
I have this html structure:
<body>
<div id="container">
<div id="header">Not empty</div>
<div id="content">
<div id="inner_header">Not empty</div>
<div id="scrollable_content">Very long content</div>
</div>
</div>
</body>
I want the page to have a fixed height equal to the height of the screen, and I also want a vertical scrollbar for the div scrollable_content.
I have tried with these styles, but the page I get is larger than the screen, so I get two scrollbars:
html, body {
height:100%;
}
div#container {
height:100%;
}
div#scrollable_content {
height:100%;
overflow-y:auto;
position:absolute;
}
How can I do this with CSS3?
Edit: I found a solution using jQuery (see below). I'd like to know if this is possible using only CSS3?
Thanks in advance!
437
Answer: Use the CSS overflow-y Property You can simply use the CSS overflow-y property to make a <div> element vertically scrollable, in a situation where it has a fixed height and its content is larger than the content area.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
By setting to 100vw we eliminate the width of the scrollbar on any platform.
When you absolutely position an element it comes out of the flow of the page. Please take a look at this fiddle. Note the green box causes two vertical scrollbars to appear.
http://jsfiddle.net/gX2DG/
To get a single scrollbar that only appears below the header, you will need to modify your CSS. This CSS works with fixed height headers only.
overflow:hidden so that they do not trigger the main browser scrollbarhttp://jsfiddle.net/J4Ps4/
/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html, body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0; }
/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
overflow-y:auto;
border: 1px solid green;
}
My suggestion:
-Have some javascript running to re-size the container div / scrollable_content div to always be 100% height of the browser. If people resize, maximize etc. the browser window your heights will be off.
Depending on the website / application you could have this on a timer (setTimeout) or listening to the resize events of the browser
Check out: jQuery - dynamic div height
or
http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
Update:
Here's what I was talking about: http://jsfiddle.net/7TqsE/21/
I just have it as a resize button, but you can see if you resize the bottom-right window, and click the button, it will resize that div for you to be the height of the containing div.
You can also extend this by getting browser height (this example includes width). I didn't write this script, it's the same one spewed throughout the internet, I just copy it:
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
