CODEWITHSUNDEEP
htmlcss
K. D.
K. D.

Reputation: 4229

Let the bottom div fill the rest of the page

I have the following structure: image http://images.devs-on.net/Image/4eludampmz3Ylfm6-Bereich.png

I don't know the height of the head but I want the second container to fill the rest of the height.

I found some solutions when I would now the size of the head but I don't. I want that the upper container is fitting to its content while the second container is filling the rest of the window.

How to solve this?

Upvotes: 0

Views: 3834

Answers (6)

Barney
Barney

Reputation: 16456

Here's a CSS-only solution that will only work in IE8, due to use of display: table.

The container must take full height, be absolutely positioned and take display: table. Its children will need display: table-row (if you want any decent styling below this level, you should really wrap the content in further wrappers with display: table-cell but I omitted this to make the example clear).

By default the rows will take up equal fraction heights of the parent, but you can make them shrink to fit their content by setting height: 0 (or any other height).

Hope this helps:

http://jsfiddle.net/barney/nXWbL/

Upvotes: 0

Anoop
Anoop

Reputation: 23208

You can use JavaScript/jQuery

var topDivHeight = $("#topdiv").height(),
totalHeight = $(document).height();
$('#bottomDiv').height(totalHeight  - topDivHeight );

Upvotes: 1

sandeep
sandeep

Reputation: 92813

For this you can use display:table property for this but it's work till IE8 & above. Write like this:

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

CSS

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:10%;}

.content{background:blue}

Check this http://jsfiddle.net/Rvbk4/2/

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57322

you can do this by 

position:absolute;
height:100% !important;

Upvotes: 1

Software Guy
Software Guy

Reputation: 3280

Adapted from: div with dynamic min-height based on browser window height and does not depend on javascript.

HTML:

<div id="header">
  Place your header information here.
</div>
<div id="content">
  Place your content here.
</div>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important /*min-height hack*/
  height: 100%;           /*min-height hack*/
  background-color: red;
}​

JSFiddle Test: http://jsfiddle.net/7SP9U/

Upvotes: 1

Alan Shortis
Alan Shortis

Reputation: 1109

There isn't really a good, cross-browser way of doing this with pure CSS. Your best bet is to use jQuery/javascript to adjust the height of your div to fill the screen. Assuming your top div is 200px in height:

$("#bottom_div").css({
    minHeight: (($(window).height()) - 200) + 'px'
})

You will need to call this when your resize the screen, too.

Upvotes: 1

Related Questions