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.
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'm trying to design a page layout that has a couple of headers, some main content, and a footer.
I want to use jQuery UI tabs widget in the main content with a border around it, so the div MUST fill all the space between the headers and footer, but also I want the content to expand if needed, off the bottom of the screen and a scrollbar appear so I can scroll down and view it.
Effectively, I want the minimum height of the content div to be the distance between the header and footer, but allow it to expand.
I've implemented the Sticky Footer method, which would work really nicely if I didn't want a border around my main content. In this jsFiddle example the div with the red 2px border needs to initially fill the page, and when you click the "Add Stuff" button to add more content which goes off the bottom of the screen it needs to push the footer down and show a scrollbar.
This is what I'm trying to achieve:
...with these rules:
Content needs to have a border.
Content needs to start off by filling the space between header and footer.
Content needs to grow beyond the bottom of the page, showing a scrollbar.
Footer needs to be pushed down as content grows.
Use only CSS, so that if content changes dynamically, everything adjusts automatically.
Work in modern browsers only, I'm not interested in supporting IE<8.
I've tried:
Absolute positioning, but this fixes the content to the size of the screen and doesn't allow it to expand past the bottom.
jQuery positioning, but this feels too much like a hack, and seems to be a bad way to fix it.
Using height: 100% and min-height: 100% in various places, but doesn't seem to achieve what I want.
Looking at other Stack Overflow questions around the same problem, but none of them seem to account for the content growing beyond the bottom of the screen.
Best I could come up with is http://jsfiddle.net/Atjxc/6/
Because the height of the window is variable, I had to use percentages only, along with absolute positioning.
.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}
I added a container for the main part, which shows a scrollbar when the content gets too long. I couldn't put borders because they have to be set in px values, and it messes up my percentage-based heights.
Well, You could just measure the actual distance that is between the header and footer, then set the min-height to that exact px.
like for eg, the distance between is 600px,
then set
min-height:600px;
height:100%
In this way, when you have content that fits way under min-height eg. 600px then the height shall be 600px, now when the content is added and it grows out of the 600px height, then the container div shall elongate in height to accommodate the added content which is covered by height:100%; .
And yeah, you can use "Measure It"(its a chrome/firefox extension) to measure the onscreen distance on the fly, its more convenient.
Hope this helps, and heres the jsfiddle http://jsfiddle.net/Atjxc/11/
So I know the first thought is "Sticky Footer", but that's not really the case. It's the footer height that's the variable.
I have a page where the main content is 200px margin from the top... after the content, I need the footer to extend all the way down for the remainder of the browser height; there will be a 1600px background image that will repeat-x
Here's one trick. Make your header, content, and footer as you normally would. Set the height of the footer to 100% and give it the position:fixed attribute, and make sure that you don't give it a top, bottom, etc. attribute. This will take the footer "out of flow" but leave it right where it would be naturally (this removes any ugly scroll bars).
you can see it in action in the example demo here.
Why not just make body have the background-image of the footer?
Then, you can set the main content to have whatever background you like, and the footer will appear to extend to the rest of the page.
http://jsfiddle.net/JFtwD/25/
Here is how you could do it. Don't know if it is the best solution, but it is a solution.
I'm having trouble getting my footer to stick to the bottom of the page. It works in 1024x1280, which is what I'm designing for, but the #content section overlaps the footer and causes white space at the bottom of the window as soon as I test it in 1024x768 and 800x600. I've tried:
Setting the footer position to absolute w/ bottom:0 ;
Using position:fixed, which works, but overlaps the content. I want it to appear after the content.
Adding padding to the container and pulling the footer up with a negative margin
Adding padding to #content and pulling the footer up with a negative margin
Using a horrible hacky #push div set to the same height as the footer
Here's the page that's having the problem.
At this point I'm about ready to throw some Jquery at it and be done, but if there's a CSS way to solve the problem I'm open to suggestions.
Edit: If things look a bit wonky for a moment, it's because I'm adding a plugin to stretch the background image. Pardon the mess!
I have an absolutely positioned div that has a width of 100% with a background image tiling horizontally. When the browser is shrunk to the point that the width of the browser is less than the page, the remaining right portion of the div's background color is truncated.
Is there a better approach or a hack to resolve this?
Here's the example: link with the div in question being the menu.
Edit: to clarify, reduce the size of your browser so that the full width of the page (960px) requires a scroll-bar. At this point, 100% of the "page", or the viewable area, is actually less than 100% of the content. When this occurs, the menu's background doesn't span the remaining content that would require scrolling to the right to see.
This issue is present in ie7, ie8, and firefox 3.5. I haven't tested the other browsers but I can only assume that this happens there as well.
Thanks
Add:
min-width: 960px;
to the menu div selector. Fixes it for me.
With regards to the actual code structure, and as someone pointed out (but promptly deleted their post), perhaps structure your elements in a more logical layout. There's no reason to have the menu as the bottom child element (as far as I could tell anyway)
It's a more linear, free flowing code structure, rather then a spaghetti mess of containers in random orders, that it can turn into.