0

我一直在与这个问题作斗争一段时间，如果你们中的任何人可以提供帮助，我想咨询一下。

我正在制作一个简单的布局，其中有一个 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 设置了边框，只是为了看看我可以正确地拉伸它们，所以请忽略这些。

4

2 回答 2

0

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

于 2013-11-15T09:02:06.060 回答
0

您可以将标题绝对定位在内容 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;
}
于 2013-11-15T09:05:31.167 回答