Home/ Questions/Q 3285660
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:17:30+00:00

This is probably not possible with CSS, but maybe I’m wrong: I have a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0