Question

我有一个div，我想让它在没有水平或垂直滚动的情况下填充整个页面。

html就像：

<body>
    <div class="container">
    </div>
</body>

和css一样：

body{
  background: #222;
  margin:0;
  padding: 0;
}
.container{
  margin:0 auto;
  padding:20px;
  width:800px;
  background: rgba(20,20,20,0.2);
  height: 100vh;
}

通常使用vh它可以工作，但由于在容器上应用了一些填充，它不起作用。那么我可以使用什么技术来解决这个问题呢？

The JSFiddle is here

Answer 1

尝试在.container元素上使用box-sizing: border-box。这样做会使元素的填充和边框包含宽度和高度分配。

.container {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
    width: 800px;
    background: rgba(20,20,20,0.2);
    height: 100vh;
}

Answer 2

这与the way that css adds the padding to the height计算总高度有关。然而，正如Paul Irish's box-sizing中所解释的那样，您可以快速灵活地修复所有元素：

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Answer 3

不确定这会对你有所帮助，但你可以尝试一下 -

给出相对于身体的位置和固定在div.container上的位置，宽度为100％，高度为100％。

body{
    background: #222;
    margin:0;
    padding: 0;
    position:relative;
}
.container{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    background: red;
    height: 100%;
}

Answer 4

Box-sizing FTW!如果你需要包含填充作为元素维度的一部分，那么box-sizing: border-box是你唯一的希望。

FWIW 您应该知道Viewport Units are not fully supported因此，如果您需要更多跨浏览器，则可以使用100vh轻松避免使用100%。< / p>

E.G：

html, body {
    height:100%;
    min-height:100%;
}
body{
    background: #222;
    margin:0;
    padding: 0;
}
.container{
    margin:0 auto;
    padding:20px;
    width:800px;
    background: red;
    height: 100%;
    box-sizing: border-box;
}

<div class="container">

</div>

div高度填充整个页面

4 个答案: