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.

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.

My CSS is as follows:

    * {
    -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%;

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

回答1:

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

回答2:

Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;

来源：https://stackoverflow.com/questions/19997085/stretching-a-content-div-under-a-header-to-full-page-length

标签

css

html

stretch