My website has three components:
a fixed height header that spans the width of the screen
a fixed width nav under the header on the left that spans the remaining height of the screen
a content area to the right of the nav that takes up any remaining space.
I understand how to implement the horizontal aspect of the liquid layout so that the nav remains fixed while the content area takes up remaining width, but I don't understand how to implement the vertical aspect of liquid layout so that both the nav and content area take up at least the remainder of the height and at most the height of their content (assuming that this is taller than the screen less the header height).
Possible with divs?
Yes, it's possible. Take a look at Ryan Fait's sticky footer, and my previous answer to a similar question.
Here you go: http://jsfiddle.net/HcBKV/embedded/result/
There are generally two ways to go about it. One is with setting the height and width to 100%, the other is with stretching by means of position absolute and making it a fixed length from each side.
Related
I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.
Here is the basic layout of my site:
fixed header,
1 sidebar on each side,
middle area with content.
Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/
It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.
Look at it this way.
The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element
The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).
So the height of your boxes will all be set to match the heigth of the browser window...
and this is exactly what you see when you shrink the browser window heigth!
Because:
Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).
The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...
So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...
One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)
... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...
Hope this helps!
Good luck!
Perhaps I'm the last developer to ask this but I don't get it:
I'm considering using a fixed width layout such as this one:
http://www.gridsystemgenerator.com/gs02.php
Based on the screen size the left and right columns resize dynamically while the middle grid stays fixed. Great!
Now what I don't understand is that there are ton of websites out that use this approach but they also have page sections which have borders and background images that fill the complete screen width.
An example:
http://www.gridsystemgenerator.com/gs02.php
The top strip, tab menu and footer sections have lines that extend out over the full screen width.
How do they do this?
Pavlo, thanks for the tip!
So it turns out that there are container divs which are width 100 and float left which can contain design elements across the whole page width. Then the fixed grid divs are embedded into the container divs.
:)
http://jsfiddle.net/rExDY/
If the result panel is wide enough, the page behaves as I want with the nav on the left and content on the right. What I'd like to happen when the viewport shrinks is to have the content shrink once it hits the nav, rather than wrapping below it. I've been playing around with min-width and can't seem to get it to do what I want.
You have the content width set to 90%. If the viewport is so small that the <nav> box won't fit in the remaining 10% of the width then the content wraps below it. If you reduce the content width to 80% you will see that it behaves much better, but the proper way to write it is to reserve an absolute-width column for the <nav> element on the left of the window.
You might want to try the table-cell property (IE8 and up only), and add a fallback (eg. with fixed with for nav) for IE7 and below:
demo
Why not try playing around with something like this
http://jsfiddle.net/rExDY/27/
The nav and content will not overlap unless the screen is very small. You could use some CSS3 to shift the nav if it reaches a certain width.
I'm struggling to create a very simple layout of header and 2 column content - left navigation and right content (http://jsfiddle.net/WsQbs/4/).
What I cannot achieve is having menu and content take 100% height of the page (not just window), while having a vertical line (border) between menu and content. The problem is that when positioning content absolutely and any of the 2 columns have enough content, so that scrollbars appear, the background and border of corresponding divs still only take 100% of the window, not full height of the content.
the absolute position prevent it from you want. is this what you want? http://jsfiddle.net/bingjie2680/WsQbs/6/
update: http://jsfiddle.net/bingjie2680/WsQbs/8/
I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).
Here is the problem:
The background color of the footer/header does not paint to fill the rest of the screen (horizontally) when the user zooms in.
What am I doing wrong?
Here is the site again: www.imustsolutions.co.za
Thanks in advance.
Regards,
M
The problem is that the width of your header is set to 100% (100% of the original browser window), whereas your main content is set to 980px.
So when you are on a full size mode, 100% will be greater than 980px, but on resizing or zooming in 100% will become less than 980px and your header will break whereas the main content will overflow to the right, if need be.
Setting a min-width for both the header and the footer to the same value as the width (plus the padding and margin if any) of the main content is usually enough to fix such issues.
With regard to your site, as it seems your main content is set to 980px you may then try:
#header {min-width:980px;}
That's basically how it's supposed to work. The width of a block-level element is determined by the width of its containing block. And the width of the initial containing block (i.e. the containing block of the html element) has the dimensions of the "viewport" (i.e. the browser window).
In other words, unless you've explicitly set widths on your blocks to make them wider than the viewport, they'll never be wider than the viewport.
You can see the same thing happening on the footer of StackOverflow itself too, for example: if you zoom in on this page until you get a horizontal scrollbar and then scroll sideways, you'll see the gray background chopped off too.
One way you could fix this is by turning the entire page into a float, since the width of floating elements shrinks to fits the dimensions of its contents and isn't contrained by the dimensions of the viewport.
Simply adding float: left to the html or body tag should do the trick. I haven't tested that in all browsers, though.
Your header and footer DOM element should be placed within main content. So your header 100% will be limited with main content size:980px