I'm trying to make a layout in which total minimal height would be 100% (if site would be longer, the footer should go down along with it). Header and footer should have 100% width.
http://jsfiddle.net/MXrY2/2/
This is what I came up with (a bit changed example from cssgirl.com), I only need this page to be 100% height at start (and go down if there's more content).
Any ideas how to achieve that?
The answer from this question applies here. Specifically, see the steps outlined here.
If you have 3 divs header content footer
set the min-height of content div to be 100% so thats its height is always 100% long if content is longer
Related
If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.
But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?
The problem I found on many pages, including StackOverflow:
So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?
I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?
You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.
The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.
To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.
The "cut-off" div has a width of 100% of the visible area, so everything is ok.
The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.
To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:
position: absolute;
left: 0;
right: 0;
Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)
This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.
I have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
I have set up a google map on my wordpress site here:
http://drummersdatabase.com/map/ (currently set to 500px height as a temp workaround)
I have managed to get the map to span 100% of the width but not the remaining height. I basically want to make sure there are no scrollbars regardless of the user's resolution.
When I set the map height and/or it's containing div css (class="gridfull") 100%; it seems to interpret this as 100px instead.
Any ideas how I can fix this?
Thanks,
Dave
WHen you're asking your map to be height 100% it doesn't know what to be height 100% of.
If you set your HTML and BODY tags to be height 100% that gives you a starting point.
Then if you only had the map on the page and told it to be height 100% then it would indeed fill 100% of the height of the page.
However you have a header and a footer which also take up space so in order to do what you want to do you'd have to set the header and the footer to be percentage based heights too.
Have a look at the fiddle to see what I'm talking about:
http://fiddle.jshell.net/Mm3TT/
The only other way I can think to do it would be using javascript to work out the height of the users browser then subtracting the height of the header and footer from that and setting the height of the map to be whatever is left.
my page does not want to grow by its content.
please see my fiddle http://jsfiddle.net/msas3/ .
the lightBlue area should set the height for the whole page.
Because your columns are floating, they don't expand the height of parent container and so the pageContainer doesn't fit the height of content.
This problem has been raised many times, here is one of them that do a good job of providing a solution and explaining it:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
To be honest I think using a table is the simpler solution, with it I can do less positioning and more actual work.
You're being too specific. Don't set height: 100% when you don't need to. It means 100% of the parent's height.
For a simple answer: http://jsfiddle.net/msas3/1/
I removed height, width and min-height on html, body and #pageContainer
(If there is a specific reason you need the height specified please explain that as there may be a solution for it instead.)
I have a page that has a header, a footer middle section that should grows to fill the rest of the page.
i.e. it looks like this
Let me describe the layout I'm wanting
header = 100% of page width with a fixed height. I don't want it floating.
content = min width of 760pixels, max of 1000pixels
Height to fill up to the end of the page. But, not overlap the footer. Footer should be pushed down. If content is less than 100%, footer should be at the bottom, not moved up.
footer = 100% page width and always at the bottom of the content.
Now the problem I'm having is making the footer go to the bottom. I can get it to go beneath the content div, but not to the bottom of the page.
How would I achieve that in CSS? It seems awfully hard to do simple things like that.
See this for code on a bunch of different layout formats.
Check my implementation here.
You want position absolute with bottom: 0
You also want to make sure that the z-index is high so that content will flow under it (well, that's really your choice).
If I understand well your question, that will keep the footer at the bottom of the page, no matter the content.
Links that might be helpful :
css-fixed-footer
fixed-footer
an-old-implementation-of-fixed-footer
My thinking would be:
get a min-height attribute set for the content div (might need workaround with IE, as always)
or, get absolute positioning for the footer to bottom and set a negative margin to top, say, if the footer height is fixed to 50px, then set margin-top to -50px
Sorry I am working at the moment so I cannot craft a demo page :)
One critical thing for this design is to verify that the solution works for all contemporary browsers.