Hello fellow stackies,
I’m developing a site and I have a small “problem”. It’s not that important, the site works but it’s just one of those annoying things that u keep scratching ur head about over and over.
What I’m trying to do is mix static height with dynamic height.
Example:
HTML:
< HTML >
< BODY >
< DIV class="header_with_menu" >
< /DIV >
< DIV class="main_content" >
< /BODY >
< /HTML >
CSS:
body{ margin: 0; padding 0;
width: 100%; height: 100%; }
.header_with_menu {display: block; margin-left: 100%; margin-right: 100%; height: 160px; }
.main_content {display: block; margin-left: 100%; margin-right: 100%; height: 80% }
As u can see, nothing fancy. I use a custom scrollbar javascript on main_content.
It works fine until I start screwing with the window height of firefox (or any other browser).
What I expect: When I make the window of firefox smaller and smaller, main_container will get smaller and smaller, but, remain inside of the firefox window (since it’s height is dynamic, it will simply adjust because it’s cool.)
What happens: The height of main_container will eventually get stuck at a certain height, which I don’t specify, and content will start disappearing out of view at the bottom of the browser window.
I want main_content to stay inside of the viewscreen and auto adapt to the height of the browserwindow.
How do I do this??
It’s annoying when you have a smaller monitor with just 768 px of height and about 10px fall outside of the scrollable area… And the worst thing is, I can’t seem to get it behave on my own. I’ve tried making things absolute, they just overlap each other and now way stopping that since they’re both absolute and outside of normal flow. I’ve tried experimenting with maximum and minimum heights in percentages for both header and only container… didn’t work. Searched for javascript to auto-fiddle with my css’ height or max-height percentage, didn’t work out too well…
basically i’ve been sparing with this for two days now and I’m just not creative enough to come up with some solution.
Is there a pure css solution for this?
(P.S. I’m using 77% height now for main_content since that seems to be the perfect border: not too small for 1920×1080, and not too large so content will start to disappear @ 1440×900. 78% will make content start disappearing and below 75% just makes it seem ugly at 1920×1080.)
I’m sorry for answering my own question, but the answer is: use a flow layout with a script that calculates the space to the bottom of the screen using percentages calculated by the current width and height of the window, to calculate the height of the content and/or footer div.
If I have time I’ll post the script here as an edit.