Question

我有一个简单的网页，其中心内容为红色背景。无论是否有太多内容，我都希望背景颜色一直到达页面底部。

我尝试了各种方法组合，但似乎没有任何方法可以正确拉伸它。在小提琴中，我试图使用一个弹性盒，但它似乎没有用。

小提琴：http://jsfiddle.net/Dragonseer/MNQjk/

<section class="main">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</section>

body
{
    background-color:white;
}

.main
{
    max-width:80%;
    background-color:red;
    margin: 0 auto;
    padding: 10px;

    display:flex;
    align-content:stretch;
    flex-direction:row;
}

Answer 1

我尝试了各种方法组合，但似乎没有任何方法可以正确拉伸

我认为你不想要flex ONLY解决方案，因为你实际上可以在没有flex的情况下实现这一点，所以如果这是重点，那么设置父元素{{1转到height

Demo

另外，您会看到，我正在使用下面的代码段

100%

除了计算内部元素的* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }，borders而不是默认的盒子模型（在元素外部计算这些因素）之外什么都不做，因此它不会像你一样导致垂直滚动使用padding并使用了padding，正如我所解释的那样，height: 100%;将被计算在元素之外，因此会导致滚动。

Answer 2

box-sizing是一个很好的选择，它是一个CSS3属性。

我还有一个选择。

body, html {
    min-height:100%;
    height: 100%;
    margin:0;
}
.innerBox {
    min-height:100%;
    width: 80%;
    background: red;
    margin: 0 auto;
}

<div class="innerBox">
    Testing
</div>

Answer 3

使用新的div包装内容怎么样？像这样http://jsfiddle.net/MNQjk/2/

.block
{
  max-width:80%;
  background-color: red;
  height: 1000px;
  margin: 0 auto;
}

设置背景颜色的最小高度以适合页面

3 个答案: