div A fixed height, div B below adjusting to window

Question

I have a header and a content div. The header height is fixed and the content div I want to adjust to the windo height, but if its content exceeds the window height therre shall be y-scroll bars for the content div.

jsfiddle

HTML

<div class="top"></div>
<div class="bottom">

      Lorem ipsum dolor sit amet....
</div>

CSS

.top{
    height:100px;
    width: 100%;
    background-color: grey;
}

.bottom{
    min-height:100px;
    width: 100%;
    overflow-y: scroll;
    background-color: red;
}

so you need to set content height by javascript or fixed content height by css and excess content beyond that height generates y-scroll bars?? — Nitesh, May 30 '13 at 11:15

score 3 · Accepted Answer · answered May 30 '13 at 11:18

3

This is either going to need display: table; or a new CSS3 feature - calc().

What do you need to support? If it is only new browsers, you could try this:

.bottom {
  height: calc(100% - 100px);
}

DEMO

answered May 30 '13 at 11:18

Andy

14,427
3
52
76

1

@kaputu - You can also easily do this without using `calc()` or `display: table;`, if you need support for older browsers, just set `.bottom { position: absolute; top: 100px; bottom: 0px; }`. Here's a [jsFiddle Demo](http://jsfiddle.net/dmKbn/10/). – Mathijs Flietstra May 30 '13 at 11:53

score 1 · Answer 2 · answered May 30 '13 at 11:18

Use calc() - http://html5please.com/#calc

with 100px being your top bar

height: 100%; /** older browsers **/
max-height: 100%; /** older browsers **/
max-height: -webkit-calc(100% - 100x); /** Chrome / Safari 6 **/
max-height: -moz-calc(100% - 100px); /** FF 4-15  **/
max-height: calc(100% - 100px); /** FF 16+, IE 9+, and future other browsers **/
overflow-y: scroll;

score 0 · Answer 3 · answered May 30 '13 at 11:15

0

<div class="top"></div>
<div style="overflow:auto;height:100%;position:absolute;">
<div class="bottom">

      Lorem ipsum dolor sit amet....
</div>
</div>

.top{
height:100px;
width: 100%;
background-color: grey;


}

.bottom{
    min-height:100px;
    width: 100%;
    overflow-y: scroll;
    background-color: red;

}

answered May 30 '13 at 11:15

no, then I have a scrollbar at the window, but not at the content div. Test here: [jsfiddel](http://jsfiddle.net/dmKbn/4/) – kaputu May 30 '13 at 11:18

score 0 · Answer 4 · answered May 30 '13 at 11:17

0

Add position:absolute and max-height:100% to .bottom class,

Then the changed class will be

.bottom{
min-height:100px;
width: 100%;
overflow-y: scroll;
background-color: red;
position:absolute;
max-height:100%;
}

answered May 30 '13 at 11:17

Bharadwaj

2,535
1
22
35

then fix height for outer div and get that div height from jquery as `$("#divid").height()` which will give height in pixels. Assign that height to the `.bottom` div in jquery as `$(".bottom").css({ "height":"obtained-value"; });` http://stackoverflow.com/questions/14035819/window-height-vs-document-height I think this may help you :) – Bharadwaj May 30 '13 at 11:30
100% height for any container will always tries to occupy the parent container's height. So if you fix the parent container's height, then the above answered modified class will work fine. – Bharadwaj May 30 '13 at 11:46

score 0 · Answer 5 · answered May 30 '13 at 11:18

0

the scroll bars will automatically added if content exceeds the window size. To add content height to window height try to use the javascript to get window size and set it within onload method of page instead of setting it inside css.

answered May 30 '13 at 11:18

GPU..

175
12

score 0 · Answer 6 · answered May 30 '13 at 11:24

0

To fulfill your requirement, we need to use jQuery.

like this.

$(document).ready(function(){

   var height = $(window).height() - $(".top").height();
   $('.bottom').css('height', height+'px');

});

jsFiddle File

answered May 30 '13 at 11:24

Roy Sonasish

4,571
20
31

div A fixed height, div B below adjusting to window

6 Answers6