Home/ Questions/Q 6588157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:00:42+00:00

How can I create a layout that has a fixed height div on the

  • 0

How can I create a layout that has a fixed height div on the top and below it a div that ALWAYS takes up the rest of the page’s height and width. So if the window is resized the height and width of the second div resizes accordingly.

An example of what I want to achieve is similar found on http://omegle.com/

So far I came up with this:

<html>
<head>
<body style="width:100%;height:100%;position:absolute;background:#EEE;margin:0 auto">
<div style="border-bottom:1px solid #000;height:50px;background:#900">1st div</div>
<div style="height:100%;width:100%;background:#090">2nd div</div>
</body>
</html>

This gives me the fixed div on top, and the resizable div on the bottom, however the second div does not take the fixed div’s height into account and so the div ends up being bigger in height than I want it to be. If I scale down the height % of div 2 to say 80%, it will then fit, however it does not stay constant when resizing the window due to the fixed height block above.

I am looking for a javascript free solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why don’t you give the body the content background color?

    See demo fiddle.

    CSS:

    html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: #090;
}
#header {
    border-bottom: 1px solid #000;
    height: 50px;
    background: #900;
}

    And when you need the content really to stretch to the window bottom, then place it absolutely, like in this fiddle:

    CSS:

    #content {
    position: absolute;
    top: 51px;
    bottom: 0;
    background: #090;
}
    • 0