CODEWITHSUNDEEP
css
Proud Member
Proud Member

Reputation: 40496

How do I force a DIV to extend down to the bottom of the screen?

This is probably not possible with CSS, but maybe I'm wrong:

I have a document structure like this:

BODY
  DIV[A]
    DIV[B]

DIV[A] is position:absolute with fixed with and centered on screen. It has no height setting.

DIV[B] is position:absolute with top:300px. This is the actual content DIV. Inside that, I position everything with position:absolute. Because I love position:absolute. It gives full control over positioning. No ugly text flow headaches... it's so nice.

Ok. But the problem now: DIV[B] is always only that height what I tell it to be. Now, maybe there's a cool CSS trick that would pull it always down to touch the bottom of the browser viewport?

Upvotes: 3

Views: 11015

Answers (4)

ALOToverflow
ALOToverflow

Reputation: 2699

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't 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

Upvotes: 1

Arrabi
Arrabi

Reputation: 3768

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 regarding your problem with DIV[B], you can mix between <table>s and <div>s.

Upvotes: 1

Mike
Mike

Reputation: 654

#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

Upvotes: 1

Brad
Brad

Reputation: 15577

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>

Upvotes: 2

Related Questions