Div with scrollbar in fixed height page
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开发者_如何学C 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!
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.
- Zero out margin/padding on html/body and set
overflow:hiddenso that they do not trigger the main browser scrollbar - Set body to 100% height so that we can set 100% on divs inside of it
- Absolutely position the child div that will contain the scrollable content. Then use left, right, top, bottom to stretch it to fill the screen.
http://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;
}
using the code by mrtsherman, I've made your solution :)
I hope this is it.
http://jsfiddle.net/zzlawlzz/Guq9K/2/
This is the solution I've found so far using jQuery:
window.setTimeout(function () {
$(document).ready(function () {
var ResizeTarget = $('#content');
ResizeTarget.resize(function () {
var target = $('#scrollable_content');
target.css('height', $(document).height() - $("#header").height() - $("#inner_header").height());
}).trigger('resize');
}); }, 500);
加载中,请稍侯......
精彩评论