Search code examples
htmlcssheightliquid-layout

having trouble adjusting css height of divs to be 50% of page. I want liquid layout without using any em or pixels anywhere

I am trying to setup a liquid layout for a page and I am having great difficulty adjusting the height of the divs. I don't want a fixed layout because I want the page to fit like a glove, no matter the size of the screen. I am using only percentages, no pixels or em. The layout of the page looks something like this:

header
wrapper
  left column, top
  left column bottom
  right column, top
  right column, bottom
footer

Now, I want to make left column, top 50% height of the page and left column, right the other 50% height of the page. The problem is the content overflows and gets cutoff, forcing me to use scrollbars and set pixel height. This is not what I want. Ideally, I'd like to set the divs to 50% of the page AND use scrollbars if the content overflows. Does that make sense?

How do I go about this? I would really appreciate any help.

Thank you very much.

Solution

  • This would be something better suited for jquery. You can call it to resize the height on load and on window resize.

    To get the window height and width you would use

    windowHeight = $(window).height();
windowWidth = $(window).width();

    You take this and assign it to a variable and subtract the heights of the header and footer. And in set the css by using

    ${'#content_container').css({width: windowwidth+"px", height: windowHeight+"px"});

    Then if someone resizes the window you run the same options in a function like the following

    $(window).resize(function() {
 //update stuff
});

    Your code would look something like below but change would do the same thing for each one.

    $(document).ready(function(){
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

$(window).resize(function() {
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

    you can replace the 100's for static calls of height by assigning variable and call $('#divid').height(); Since your header is position:absolute, if you subtract the header then you will need to position the div from the top the same px.

    To call js include the following before the javascript above.

    <script src="http://code.jquery.com/jquery-1.6.4.min.js" />