将内容div（在标题下）拉伸到整页长度 [英] Stretching a content div (under a header) to full page length

问题描述

我一直在与这个问题作斗争一段时间，我想问一个问题，如果你有任何帮助。

I've been battling with this problem for a while and I'd like to ask advice if any of you can help.

我在做一个简单的布局，其中我有一个120px高标题和一个内容div在它下面。我想将内容拉伸到页面的底部，但是当我将高度设置为100％时，它在页面上延伸。
我已经尝试谷歌搜索这么多的时间，但没有一个答案，我发现帮助我或太复杂，不能理解。

I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page. I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.

我的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的边框，看到我可以正常伸展忽略它们。

I've set borders to html and body just to see that I can stretch them properly, so please ignore those.

推荐答案

您可以将标头绝对位置置于内容div中，并将内容div的顶部填充设置为相同height作为标题。

You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.

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（在标题下）拉伸到整页长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！