Question

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

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

我希望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;
 }

Answer 1

如果要将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。

Answer 2

如果您想要一个填充视口高度100％的元素，您需要：

body, html {
  height: 100%;
}

#wrapper {
  height: 100%;
}

Answer 3

用于居中包装div

body{
   margin:0px;
   padding:0px;
  height:100%;
}
.wraper{
   width:90%;
   margin:0px auto;
  height:100%;
  overflow:hidden
}

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

3 个答案: