对于 div 延长全高

有什么方法可以让 div 扩展到全高吗？里面还有粘粘的鞋底。

这是网页: 网站被删除。我说的中间部分是白色的 div，中间内容有 CSS 值:

.midcontent{
width:85%;
margin:0 auto;
padding:10px 20px;
padding-top:0;
background-color:#FFF;
overflow:hidden;
min-height:100%;
max-width:968px;
height:100%;
}

所以是的，显然 height:100%不起作用。此外，所有父容器都有高度设置。

这是总体结构

<body>
<div id="wrap">
<div id="main">
<div class="headout">
<div class="headimg"></div>
</div>
<div class="midcontainer"></div>
</div>
</div>
<div id="footer">
<div class="footer"></div>
</div>
308700 次浏览
小开

This might be of some help: http://www.webmasterworld.com/forum83/200.htm

A relevant quote:

Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.

html, body {
margin:0;
padding:0;
height:100%;
}
小开
最佳答案

Did you remember setting the height of the html and body tags in your CSS? This is generally how I've gotten DIVs to extend to full height:


<html>
<head>
<style type="text/css">


html,body { height: 100%; margin: 0px; padding: 0px; }
#full { background: #0f0; height: 100% }


</style>
</head>
<body>
<div id="full">
</div>
</body>
</html>
小开

if setting height to 100% doesn't work, try min-height=100% for div. You still have to set the html tag.

html {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}


#fullHeight{


width: 450px;
**min-height: 100%;**
background-color: blue;


}
小开

This is an old question. CSS has evolved. There now is the vh (viewport height) unit, also new layout options like flexbox or CSS grid to achieve classical designs in cleaner ways, like this:

<html>
<head>
<style type="text/css">
html,body { margin: 0px; padding: 0px; }
#full {
background: #0f0;
min-height: 100vh;
}
</style>
</head>
<body>
<div id="full"></div>
</body>
</html>

This is not the exact same layout as in your question but has the benefit that the content of the page can also get longer than 100%.

As the time of this writing, iOs Safari will still show at scrollbar at 100vh. You may want to add min-height: -webkit-fill-available;. More details with this StackOverflow question.

小开

In case also setting the height of the html and the body to 100% makes everything messier for you as it did for me, the following worked for me:

height: calc(100vh - 33rem)

The - 33rem is the height of the elements coming after the one we want to take full height, i.e., 100vh. By subtracting the height, we will make sure there is no overflow and it will always be responsive (assuming we are working with rem instead of px).


提交答案