12

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

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

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

但是，如果浏览器窗口的高度大于封闭元素的组合高度（例如在iMac<div>或纵向 iPhone 方向上的情况），则下面的窗口是背景。背景和背景是不同的颜色，所以很明显是这种情况。wrapperfooter<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;
 }
4

3 回答 3

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%;
}

看看这个jfiddle。

于 2013-09-09T09:09:21.550 回答
1

如果你想让一个元素填充 100% 的视口高度，你需要：

body, html {
  height: 100%;
}

#wrapper {
  height: 100%;
}
于 2013-09-09T09:08:37.593 回答
0

用于居中包装 div

body{
   margin:0px;
   padding:0px;
  height:100%;
}
.wraper{
   width:90%;
   margin:0px auto;
  height:100%;
  overflow:hidden
}
于 2013-09-09T09:03:34.517 回答