CSS: Is there a way to make an element fill the page?

If I have the following code, how can I make the seco开发者_StackOverflow社区nd div take up the rest of the page?:

<div style="height:300px;">
  blah
</div>

<div style="?">

</div>

For example, if the user's browser window's height is 1000px, then how can I make the second div 700px?

This is an approach you could take:

1. Make the first <div> a child of the second <div>
2. Give the outer <div> some padding equal to the height of the inner <div>
3. Use position: absolute; to get the inner <div> snapping to the top of the page

Now the outer <div> will act as the bottom <div>.

Example:

<style type="text/css">
    div#outer
    {
        padding-top: 300px;
    }

    div#inner
    {
        position: absolute;
        top: 0;
        background: yellow;
        display: block;
        height: 300px;
        width: 100%;
    }
</style>

<div id="outer">
    <div id="inner">
        top content
    </div>

    bottom content
</div>

http://jsfiddle.net/Eq8Jq/1/

If absolute positioning is not a problem, you can do it like this:

<div style="position: absolute; top: 0; left: 0; right: 0; height:300px; background-color:yellow;">
    Foo
</div>

<div style="position: absolute; top: 300px; left: 0; right: 0; bottom: 0; background-color: red;">
    Bar
</div>

You can use on div2 style = "height: 100%". However, this only works if the container also has a height specified. If this is just in your main body then set body { height: 100%; } also

The key is style="height:100%" for the second div as mentioned by mrtsherman.

<div style="height:300px;background-color:yellow">
    blah
</div>

<div style="clear:both;height:100%;background-color:red;">
    Second div
</div>

The second div will have red BG for the rest of the page.

If this is not what you want, let us know.