无论封闭内容的高度如何,如何让包装器<div>填充浏览器的100%高度？

Question

无论封闭内容的高度如何,如何让包装器<div>填充浏览器的100%高度？

这个问题似乎已经以各种形式回答了无数次,但我仍然找不到适合我的答案.简而言之,我有这样的布局:

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="body"></div>
        <div class="footer"></div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

我希望wrapper在浏览器中水平居中,并填充浏览器高度的100%.每个封闭<div>元素都有一个固定的高度,通常高于一个高于浏览器窗口高度的高度.如果是这种情况,我会得到我想要的布局.

但是,如果浏览器窗口的高度大于所包含<div>元素的组合高度(例如,在iMac或纵向iPhone方向上的情况),那么wrapper似乎停止footer了其余部分的结束.这下面的窗口是<body>背景.的wrapper背景和<body>背景不同的颜色,所以这是很明显,这是如此.

有没有人有这样的CSS解决方案,以便wrapper填充浏览器高度,无论这个高度是大于还是小于内容的组合高度？

编辑:答案:

答案是下面的答案和我刚刚发生的事情的组合:在CSS中,执行以下操作:

body, html {
    height:  100%;
    margin:  0px auto;
    padding: 0px auto;
}

.wrapper {
    height:     auto;       /* These two lines were the key. */
    min-height: 100%
    /*overflow:   hidden;*/ /* Do not use this, it crops in small browsers. */
    margin:     0px auto;
    padding:    0px auto;
 }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ben*_*min 12

如果要将div高度设置为100%,则还应将html和body的高度设置为100%.然后你可以添加100%的div.

CSS

.wrapper {
border: 1px solid red;
height: 100%;
margin: 0px auto;
overflow: hidden;
}

body, html {
height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

看看这个jfiddle.

归档时间：	12 年，5 月前
查看次数：	30766 次
最近记录：	12 年，5 月前