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

Question

If I have the following code, how can I make the second 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?

What do you want the second div for? Just asking as there might be a better way to do it — LeeR, Jul 07 '11 at 03:19
possible duplicate of http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space — Michael Mior, Jul 07 '11 at 03:20

score 1 · Answer 1 · answered Jul 07 '11 at 06:21

This is an approach you could take:

Make the first <div> a child of the second <div>
Give the outer <div> some padding equal to the height of the inner <div>
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/

score 0 · Answer 2 · answered Jul 07 '11 at 03:26

0

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

answered Jul 07 '11 at 03:26

mrtsherman

39,342
23
87
111

score 0 · Answer 3 · answered Jul 07 '11 at 05:39

0

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.

answered Jul 07 '11 at 05:39

kheya

7,546
20
77
109

Right, there's no table. But your styles will work only when it is applied to a table. – Arsen K. Jul 07 '11 at 06:18
Where are you getting that from? Try it out. It seems working at least on my FF5. You can apply styles to div. Not sure how can the styles of a div depend on a table? Could you please explain how the style of a div(s) can depend on table??? – kheya Jul 07 '11 at 06:26
A div height depends on the content. If div is empty and has "height: 100%;" it height will be 0. The only exception - absolutely positioned divs. But they are not good for making general site structure in most cases. P.S. Add your code to jsfiddle - you'll see. – Arsen K. Jul 07 '11 at 06:40
jsfiddle has different behavior than what I see on my test site – kheya Jul 07 '11 at 07:08

score 0 · Accepted Answer · answered Jul 07 '11 at 05:52

0

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>

answered Jul 07 '11 at 05:52

nikc.org

16,462
6
50
83

I did it this way, but I'm afraid it might not work well in all browsers. So far it's not working in IE, but it's the best one here, thanks! – Linksku Jul 08 '11 at 01:16

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

4 Answers4