Home/ Questions/Q 6476517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:50:06+00:00

I am designing a master page. The layout is very simple.But height adjustment does

  • 0

I am designing a master page. The layout is very simple.But height adjustment does not work for me. The layout is:

<html>
<head>  
</head>
<body>
<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
</body>
</html>

What I want to achieve is

  1. ‘Container’ minimum height should be 100% and it should expand when the content is more than the height.
  2. height of the ‘top’ div should be 100px – fixed height.
  3. height of the ‘bottom’ should be 50px – fixed height and
  4. the remaining height(space) should be distributed to ‘middle’ div.

In short, whatever the height of the screen is header should be at the top with fixed height and footer should be at the bottom with fixed height. When the content exceeds the height of the ‘middle’ div then it should expand only with browser scrool bar without additional scroll bar.

I used the following css but it does not work.

html, body {width:99%;   height:98%;  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; font-size:12px;}
#container {width:990px; height:100%; margin:0px auto 0px auto;}
#top       {width:990px; height:100px;}
#middle    {width:990px; min-height:100%;  border:1px solid #336699; overflow:auto}
#bottom    {width:990px; height:50px;}

Note: I am going to use this in ASP.NET MVC pages.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6 */

    min-height:100%; /* real browsers */
}

div#top {
    padding:1em;
}

div#middle {
    padding:1em 1em 5em; /* bottom padding for footer */
}

div#bottom {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
}
    • 0