Home/ Questions/Q 6584909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:35:46+00:00

I have this html structure: <body> <div id=container> <div id=header>Not empty</div> <div id=content> <div

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    1. Zero out margin/padding on html/body and set overflow:hidden so that they do not trigger the main browser scrollbar
    2. Set body to 100% height so that we can set 100% on divs inside of it
    3. 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;
}
    • 0