ansaurus

Question

How to force an DIV to extend down to the bottom of the screen?

Answer 1

+1 A:

I suppose DIV[A] is your header and DIV[B] your main content div and you would like to always have your content div take all the page when there is not a lot of text in it, right?

If I remember correctly, because I can test it at the moment, you could :

html, body
{
height:100%;
}

DIV[B]
{
height:100%;
}

I think that should do the trick.

Edit: Here is a good example that might help you : http://www.xs4all.nl/~peterned/examples/csslayout1.html

Frank 2010-10-18 14:59:59

Height of 100% is only considered at screen render time. Any resizing of the window will cause your layout to be undesirable.

Brad 2010-10-18 15:00:53

So you're basically saying that you should keep calling a javascript function to resize the viewport

Frank 2010-10-18 15:06:32

@Frank, yes, that is the only way to have a div **always** be the exact size remaining in the window.

Brad 2010-10-18 15:30:02

@Brad, could you look at the link I've posted and tell me what you think about it. Try to resize the window to see what happens.

Frank 2010-10-18 15:34:06

Answer 2

+1 A:

To set the height to dynamically be the window height - DIV[A]'s height, you'll have to use JavaScript/jQuery and keep calling it with a SetTimeout.

Alternately, if it suits your needs, you can set DIV[B] to be position:fixed; bottom:0px;

<body onload="setupLayout();" >
...


  <script language="javascript" type="text/javascript">
    // ACTIVITIES TO RUN FOR THE PAGE
    function setupLayout() {
        setInterval('adjustLayout();', 1000);
    }

    // ADUST THE MAIN CONTAINER (content panel) LAYOUT
    function adjustLayout() {
        try {
            var divB = $get('divB');
            var divAHeight = 20px;
            divB.style.height = document.body.clientHeight - divAHeight ;
        }
        catch (e) { }
    }
  </script>
</body>

Brad 2010-10-18 15:00:01

Answer 3

+1 A:

when you want DIV to be a position:absolute , it should be in a position:relative Container

     <div style="position:relative" >
        <div  style="position:absolute; top:300px">
            <h3>
                Content Header</h3>
            <!--Content-->
        </div>
    </div>

so about your problem with the Div[B] , you can mix between s and s

Arrabi 2010-10-18 15:03:31

What do you mean by mixing between s and s?

BugAlert 2010-10-18 15:49:49

sorry,between tables and divs

Arrabi 2010-10-19 07:25:32

Answer 4

+1 A:

#div_to_touch_the_bottom {
   position:fixed;
   bottom:0;
   top:0;
   left:25%;
   right:25%;
}

This DIV will touch the bottom of viewport, you can modify its left and right according to your needs. I am not sure that this the answer you are lookign for but it could be a good start

Mike 2010-10-18 15:26:24

ansaurus

tags:

views:

answers:

How to force an DIV to extend down to the bottom of the screen?

related questions