Is the height of the page expected to extend longer than the height of the viewport or will the content be entirely visible in the window?
The content will be entirely visible in the window with no scrollbars.
No matter what screen resolution you use, the page should cover the viewport completely.
Give this a try and see if it is something you can use.
The height of the header box is fixed at 40px.
The heights of #top and #bottom are 50% of the remaining screen height, as requested.
Vertical scrollbars will be generated if content tries to extend any of those 3 containers. That means that only a limited amount of content is permitted and it should be equally distributed between #top and #bottom, OR the percentages of those two containers can be changed to whatever ratio is needed as long as they total 100%.
This is not truly fluid in that the ratio of the heights of the boxes is not adaptable; however, you can use media queries when necessary to adjust the heights of the header and content boxes as needed.
Thanks for the answer!
The header height changes from browser to browser unless we give it a larger fixed height as you did. But I want it to take up exactly the space it needs in any browser – no more. Any approach without giving a fixed height to the header?
I turned on my Win7 box and opened the file in IE11. The header looks really crummy. Not horizontally aligned well at all. I’ll give it another go and see if I can improve that.
I just learned about the default padding and was about to post just what you said, ninja Paul.
You might want to set #header * {padding:0 auto;} to preserve the horizontal padding in the buttons,
and add to the button {margin-left:10px;} to separate them a tad.
Regarding the header height in the screen shot in post #7, it looks taller than 40px.
Off Topic:
@Paul_O_B would you mind explaining how the flex-box example works? That is amazing stuff.
Does this not kill default padding in form controls for other browsers though? The kind you can’t add back in?
Kudos for the main in the code
Question on flexbox: if using flexbox and browsers don’t know elements like <main> and <footer>, does flexbox just create their block-context or do you actually still have to display: block them for someone?
Browsers have changed a bit these days and the arguments for not removing padding and margins are not quite the same as they were. You may lose some visual clues such as the depress effect on submit buttons but you can replace this with other focus styles. I find it better to explicitly control the padding, margin and line-height on form elements these days for better results and I also use the border-box model for IE8 plus so that textareas and selects are the same widths as inputs.
Whatever method you use there will always be a discrepancy so it’s a matter of being careful and checking the results
Kudos for the main in the code
Question on flexbox: if using flexbox and browsers don’t know elements like <main> and <footer>, does flexbox just create their block-context or do you actually still have to display: block them for someone?
I usually set them to block in the default reset although modern browsers should know about them now (maybe not ‘main’ yet though) so yes if you had no ‘reset’ styles then the element should be set to block just in case when using flex.
@Paul O’B would you mind explaining how the flex-box example works? That is amazing stuff.
I’m just getting my head around it also but the basis of the demo was that the 100vh sets the element to 100% of the viewport height and the flex-direction: column; sets the child boxes to be stacked vertically rather than horizontally.
The flex:1 on two of the children says that you want the space ratio that they occupy to be the same so the rest of the space in that element is evenly divided between those two items. If one was flex 2 then it would have twice the space as the other one and so on. The item without the flex1 just takes up its own space as required.
It makes the sticky footer pretty easy as you can do the same sort of thing.
Here is a javascript method of doing the job (some CSS too ). I have attached the background image to this post. The script works in all browsers back to IE7. It makes use of the mousemove event to change the position of a slider block inside a div. The percentage position of the slider is used to set the height of the outer container. The top and bottom content are set at 50% of the container height. The fully collapsed state has been constrained to 40px to allow the content text to be readable.
Many thanks for the answer! I’ve been busy doing some tests and playing around with ronpat’s solution.
I need to study flexbox before I use your code and will come back if I have more questions.
I tested {padding:0 auto;} using IE11 before I posted that note and it seemed to work fine. However, being more specific like you did you can’t go wrong. Thanks for the feedback
Paul’s flexbox solution is exciting! I’m reading up on it, too! Very neat stuff.