Home/ Questions/Q 7675213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T16:54:38+00:00

i know every web-developer hates this topic, but anyway… i found no good solution

  • 0

i know every web-developer hates this topic, but anyway… i found no good solution for this.

i have 3 DIVs, two static (grey ones) and one dynamic (red one).
The image describes the whole window. Such as at a chat application.

the div container

And, yep, the question is: how do i get the red one dynamic when the window get resized (or on other layout changes).
Is there a soltuon without javascript, just CSS(3)?

Edit: Condition: the DIV on bottom should stay on bottom of the window, sorry.

Additional Information

I already done it in JS (jQuery), but i think this is no good practice at all. (The resize method for the middle DIV have to implement in every “layout changing event”).

Example here:

var div1 = $('#div1').outerHeight(true);
var div2 = $('#div2').outerHeight(true);
var div3Padding = $('#div3').outerHeight(true) - $('#div3').innerHeight();

$('#div3').css({ height: window.innerHeight - (div1 + div2) - div3Padding });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With absolute positioning, you can do: http://jsfiddle.net/rQVmK/

    <html>
    <style type="text/css">
    #div1, div2, div3 { position: absolute; }
    #div1 {
        border: 3px solid #eee;
        height: 30px;
        top: 0; left: 0; right: 0;
    }
    #div2 {
        border: 3px solid #e00;
        top: 30px; bottom: 30px;
        left: 0; right: 0;
    }
    #div3 {
        border: 3px solid #eee;
        height: 30px;
        top: auto;
        bottom: 0; left: 0; right: 0;
    }
    </style>

    <div id="div1">Top</div>
    <div id="div2">Middle</div>
    <div id="div3">Bottom</div>
</html>
    • 0