Set div to fill in the rest of the height dynamically?

Question

So. My code is something along the lines of

    


        
                      

              相关标签:
       
      

Answer 1

you don't have to use a script for that. and also: I recommend you to separate your styling from your markup.

HTML

<div id="wrapper">
    <div id="header">
        <img src="header_image.svg" alt="the img is empty"/>
    </div>
    <div id="content">Some content</div>
</div>

add this to your CSS

html, body {
    height: 100%;
    margin: 0px;
}

/* this is the big trick*/
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: gray;
}
/* this is the big trick*/
#content:after {
    content:'';
    display: block;
    clear: both;
}

Working Fiddle

Tested on: IE10, IE9, IE8, FF, Chrome.

1. didn't use absolute positioning
2. didn't use Script (Pure CSS solution)
3. fluid layout
4. cross-browser

Explanation: with pseudo element, I'm creating a floating element (without content or width, so he's invisible) that has 100% of the container height.

and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.