I have a layout made up of several DIvs, a navbar on top, a footer dv on the bottom and a wrapper called #frame between the two to hold the content.
<div id="nav">
navbar
</div>
<div id="frame">
Content
</div>
<div id="footer">
(c) 2010 MySite.com
</div>
The content in #frame will obviously vary depending on the page, and I want to make sure that even if there's only a few lines in #frame it will fill the entire screen and ensure that #footer is always resting at the bottom of the page. Trying height:100% ends up adding vertical scrollbars because of the extra height taken up by the header and footer, and I'd definitely like to avoid this as well.
I currently am getting around the issue by making #frame's CSS height 89%, but I know this is an ugly hack and will break if I change the header and/or footer. Anyone know a more elegant way to accomplish this?
If your footer is simple like the one in the example, then you are in luck. When you know the height of the footer, either in px or em, you can absolutely position it at the bottom of the page and add the footer's height in bottom padding to #frame. If the footer is very fluid, then you will have trouble forcing it down and there is no properly elegant solution for the layout you are describing (flexbox will do it on WebKit and Gecko though; just wait until IE catches up).
Related
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/
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
I have a site I'm trying to build and I've hit one little snag that's driving me insane. Essentially, on pages without enough content to fill the viewport, I want to have the last div (my footer) fill the rest of the viewport, but it's currently being cut off.
My HTML looks like this:
<body>
<div id="header"> </div>
<div id="subNav"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</body>
I tried using html, body, footer { height:100%; } but that creates much more space than needed, essentially a full screen length of blank content in the footer.
How do I get my footer just to fill the rest of the screen without adding a scroll bar?
Thanks in advance,
One Frustrated Coder.
I'm pretty sure the only way to do this is by calculating the absolute remainder hight.
I.E, with jQuery
$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );
You would want to do this on window resize to allow for a dynamically resizing window.
$(window).resize(function(){...});
I know this is 10 months late so you probably already figured something out. But here is one solution that I use.
(sorry, for some reason I can't get the code thing to work right to show you the code.) Basically wrap a div called "container", or something like that, around all other divs except the footer. The footer div will be just under the container div with all others inside the container.
Set the background color of your body style to be what you want your fill to be at the bottom. Then the background color of the container div would be what your body background color WAS. So everything down to the footer will be what you wanted the background color to be and then the body background color fills the rest of the page.
If you don't want to go the jQuery route, the poor man's version of this is giving #content a min-height that will make it work in most displays, and/or by giving your footer plenty of padding on the bottom. It might trigger a scrollbar in some instances, as you're just controlling how short the page can be, though.
(Or you can just accept it as a limitation of the medium. Stack Overflow, for example, just has its footer float above whitespace if the page is too short.)
I have this site where I need to place two images at the top of the page on each side of the content. Temporarily it can be reached [removed].
If your resolution is wide enough you can see both right and left red Christmas decorations are aligned to the main content. However the right ones are not taken out of the page flow and create a horizontal scrollbar if the browser is smaller than ~1300px across.
I achieved the two ornaments by placing two absolutely positioned divs with backgrounds into a relatively positioned div:
<div id="alignment"> <!-- position:relative -->
<div></div> <!-- first image: position:absolute;right:-210px -->
<div></div> <!-- second one: position:absolute;right:915px -->
</div>
Although absolutely positioned elements should be taken out of the document flow, the second image isn't :( Thus, the bottom scrollbar appears.
What I tried:
making an image of both ornaments with 910px (the width of the content) of empty space apart and using only one absolute div instead of two: same issue
adding the aforementioned image to be the no-repeat top center background of <html> which resulted in only one background showing. Either I have the snowflakes on the body bg or the red ornaments over a solid white background. The latter depends on which of the two (body or html) elements have which image as the background.
placing image divs in an absolute div and making the two relative (opposite of current situation) - same issue AND does not display on <IE8
I know and am sorry for this is a big issue and hard to understand. I researched a lot and am out of ideas. Any possible solution to try out would be greatly appreciated. Also, I realize the coding of the site i linked to is on the verge of terrible, but I have just started working on it, so no comments on that, please :)
The solution in the end was to create a div that opens right after body and encases all content, closing right before body does. The style of the div:
background: url('/client/images/xmas-burbulai.png') no-repeat top center;
The png itself is the two decorations I wanted to be on each side of the body. Both pictures were pasted into one with a 910px empty gap between - the exact width of the body.
No scrollbar, crossbrowser, stylish.
try setting this div (#alignmen) with:
overflow: hidden;
Update:
<div id="main"> //Position this relatively
<div> //Positon this absolutely, this height should be the max of the two floated divs
//In here
<div>Left</div>//Float Left
<div>Right</div>//Float Right
</div>
<div>