1

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

我尝试了各种方法组合，但似乎没有任何方法可以正确拉伸它。在 Fiddle 中，我尝试使用 flexbox，但它似乎不起作用。

body {
  background-color: white;
}

.main {
  max-width: 80%;
  background-color: red;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  align-content: stretch;
  flex-direction: row;
}
<section class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam dolor. Pellentesque a nibh in magna blandit elementum. Sed sodales porttitor dolor vel bibendum. Ut viverra justo in elit scelerisque, nec accumsan arcu facilisis. Nam ultricies
    leo vitae felis sollicitudin lobortis. Cras nec nibh venenatis, bibendum neque at, suscipit lacus. Vestibulum interdum sodales cursus. Pellentesque feugiat eu velit venenatis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    faucibus risus quis est pellentesque ultrices.
  </p>
</section>

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

3 回答 3

3

我尝试了各种方法组合，但似乎没有什么能正确拉伸它

我假设你不想要一个flex唯一的解决方案，因为你实际上可以在没有 flex 的情况下实现这一点，所以如果这就是重点，那么将父元素设置height为100%

演示

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  background-color: white;
  height: 100%;
}

.main {
  max-width: 80%;
  background-color: red;
  margin: 0 auto;
  padding: 10px;
  height: 100%;
}
<section class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam dolor. Pellentesque a nibh in magna blandit elementum. Sed sodales porttitor dolor vel bibendum. Ut viverra justo in elit scelerisque, nec accumsan arcu facilisis. Nam ultricies
    leo vitae felis sollicitudin lobortis. Cras nec nibh venenatis, bibendum neque at, suscipit lacus. Vestibulum interdum sodales cursus. Pellentesque feugiat eu velit venenatis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    faucibus risus quis est pellentesque ultrices.
  </p>
</section>

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

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

只会计算元素内部的borders,padding而不是默认的盒子模型，默认盒子模型将这些元素计算在元素之外，因此它不会导致您使用的垂直滚动padding，我height: 100%;按照我的解释使用，padding将被计算在元素，因此将导致滚动。

于 2013-10-01T07:05:37.820 回答
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>

于 2013-10-01T08:55:46.423 回答
0

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

.block
{
  max-width:80%;
  background-color: red;
  height: 1000px;
  margin: 0 auto;
}
于 2013-10-01T07:06:13.207 回答