Geek Answers Handbook

Div with scroll bar on 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 need a vertical scroll bar for the div scrollable_content .

I tried these styles, but the page I get is bigger than the screen, so I get two scroll bars:

 html, body { height:100%; } div#container { height:100%; } div#scrollable_content { height:100%; overflow-y:auto; position:absolute; }

How to do it using CSS3?

Edit: I found a solution using jQuery (see below). I would like to know if this is possible using only CSS3?

Thanks in advance!

+8
jquery html css css3
source share
4 answers

When you fully position an element, it exits the page stream. Please take a look at this fiddle. Notice that two vertical scroll bars appear in the green box.

http://jsfiddle.net/gX2DG/

To get one scrollbar that appears just under the heading, you will need to change your CSS. This CSS only works with fixed height headers.

  • Change the marker / padding to html / body and set overflow:hidden so that they do not launch the main scroll bar of the browser.
  • Set the body to 100% height so that we can set 100% to the div inside.
  • Absolutely place 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; }
+12
source share

My suggestion:

-Make sure some javascript works to resize the div / scrollable_content div container to always be 100% browser height. If people resize, increase, etc. Browser window, your heights will be disabled.

Depending on the website / application, you can use this on a timer (setTimeout) or listen to browser resize events

Check out: jQuery - dynamic height div

or

http://css-discuss.incutio.com/wiki/Hundred_Percent_Height

Update:

Here is what I talked about: http://jsfiddle.net/7TqsE/21/

I just use it as a resize button, but you can see if you change the lower right window and click the button, it will resize this div so that you are the height of the containing div.

You can also expand this by getting the height of the browser (this example includes width). I did not write this script, it was the same erupting all over 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; }
+1
source share

using mrtsherman code, I made your decision :)

I hope so.

http://jsfiddle.net/zzlawlzz/Guq9K/2/

0
source share

This is the solution I have found so far with 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);
0
source share

More articles:


All Articles