CSS: Set Div height to 100%

2018-06-14 13:53:50

I have a header on my page which is just over 100px (111px to be exact) The div below it needs to extend to the bottom of the viewport, as if i had set the bottom to 0px. The problem lies in the fact that i cannot specify top and bottom in ie6 (bug).

I can either specify top: 111px or bottom: 0px, but i still need the height to be correct ie. 100% -111px, according to the size of the viewport.

Can't seem to get expressions working coz that seems to be the solution

Here's my css code:

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

Any suggestions?

I added the height property to the body and html tags.

HTML:

<body>
<div id="wrapper">
 <div id="header">header</div>
 <div id="content">content</div>
</div>

CSS:

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    height: 100%;
    min-height: 100%;
}
#header
{
    height: 111px;
}

The best way to do this is to use view port styles. It just does the work and no other techniques needed.

Code:

div{
  height:100vh;
}

<div></div>

Alternatively, you can just use position:absolute :

#content
{
    position:absolute;
    top: 111px;
    bottom: 0px;
}

However, IE6 doesn't like top and bottom declarations. But web developers don't like IE6.

链接地址: http://www.djcxy.com/p/41468.html

上一篇: Jquery.height（）使用F5或CTRL + F5返回不同的结果

下一篇: CSS：将Div高度设置为100％