Question

我一直在与这个问题作斗争一段时间，如果有人能提供帮助，我想咨询一下。

我正在做一个简单的布局，我有一个120px的高标题和一个内容div。我想将内容扩展到页面底部，但是当我将高度设置为100％时，它会延伸到页面上方。我已经尝试了很多次谷歌搜索，但我找到的答案都没有帮助我，或者太复杂而无法理解。

我的CSS如下：

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

html {
    height: 100%;
    border: 5px solid red;
    margin-bottom: -16px;
}

body {
    background-color: lightblue;
    height: 100%;
    border: 5px solid blue;
    margin: 0 0 -16px 0;
}

.wrapper {
    display: block;
    position: relative;
    background-color: green;
    width: 605px;
    margin: auto;
    height: 100%
}

.header {
    display: inline-block;
    background-color: blue;
    height: 120px;
    width: 450px;
    text-align: center;
    padding: 5px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.content {
    display: inline-block;
    background-color: red;
    padding: 10px 5px;
    width: 450px;
    height: 100%;

我已经设置了html和body的边框，只是为了看到我可以正确地拉伸它们，所以请忽略它们。

Answer 1

设置max-height: 100%;而非height: 100%;，不会超出标题高度的高度height: 120px;

Answer 2

您可以将标题绝对定位在内容div中，并将内容div上的顶部填充设置为与标题相同的高度。

JSFiddle

HTML

<div class="wrapper">    
    <div class="content">
        <div class="header"></div>

    </div>
</div>

CSS

.header {
    position:absolute;
    top:0;
    left:0;
    background-color: blue;
    height: 120px;
    width: 450px;
    text-align: center;
    padding: 5px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.content {
    display: inline-block;
    background-color: red;
    padding: 10px 5px;
    width: 450px;
    height: 100%;
    padding-top:120px;
}

将内容div（在标题下）拉伸到整页长度

2 个答案: