Question

Is this possible? Essentially I’m trying to create a div layout that looks like:

<div_wrapper>

    <div_header>
    </div_header>

    <div_content>
    </div_content>

</div_wrapper>

Where upon page load, the div_header occupies 200px, and the div_content fills the remaining vertical space. And also, as the browser changes sizes (ie, user drags corner of browser to resize), the div_header still remains at 200px, which the div_content dynamically changes sizes.

Is this possible? Thanks.

Answer 1

i don’t see any problem with div_header () just create a css rules that states:

#header{height:200px;}

you can use js to resize you content (). If you include jQuery

$(document).ready(function(){
     $(window).resize(function(){
         $('#content').css("height", ($(window).height() - 200) + "px");
     });
     $('#content').css("height", ($(window).height() - 200) + "px");
});

Hope this helps