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.)
Related
I have a trivial page with body having an image background, with background-size:cover. I set html { height:100% } to fill up the entire page regardless of the content amount. Up to this point everything worked as expected.
I've added a div and set position:absolute; right:0; width:200px; This, again, worked as expected, until I added content.
When this div is populated so much that the contents take up more space than the height of the page, the scroll bar appears. Scrolling down reveals that the background image does not actually cover the entire page.
This is due to the fact that my div is taller than 100% of the HTML height.
How can I address this?
You could add background-attachment:fixed; to your body element.
The caveat with this approach is that the background is now fixed in the viewport and does not scroll with the document.
https://developer.mozilla.org/en-US/docs/CSS/background-attachment
Do it like i did in this codepen, and it should work fine.
Update: (using some JS)
see this codepen for more complete solution.
Instead of positioning any items via position:absolute I utilized float as much as possible.
I also added a <div> wrapper to the entirety of contents inside of <body> this helps the proper formatting and stretches the containing <div> accordingly. The body tag and its background properties now behave properly!
I have a container on my site that is 100% of the screen width and has its own scrollbar using overflow: auto. The standard scrollbar does not display on my site and I use this instead because there is another layer behind the main layer of my site that also has its own scrollbar (you can view my site here and click a blog post to see what I mean).
I have a blue bar that I want to be fixed to the top of the screen. This is easy enough in terms of positioning in that way with position: fixed however the width of the bar needs to be 100% of the screen width and I'm finding that the bar will overlap the scrollbar that is applied to its parent container.
Here is a jsFiddle showing what I mean: http://jsfiddle.net/xUTR2/1/
I've thought about just offsetting the bar to the left based on the width of the scrollbar, but then I decided that I couldn't rely on estimating the width of the scrollbar across different browsers, and that would leave a gap if there were no scrollbar.
Is there an obvious way to force the scrollbar to render ontop?
As I can't comment yet, im forced to give an answer.
If im correct you would like to get the top blue bar in a fixed position as in visible while scrolling down.
personally i would make seperate containers
something like
<div id='page'>
<div id='bluebar'></div>
<div id='content'></div>
</div>
Demo can be found here ( http://limpid.nl/lab/css/fixed/header )
you can do this by jquery easily, at some event.
$("body").load(function () {
$('scrollable container').css('overflow-y', 'auto');
});
try keeping the blue bar and other page content in separate containers, i think it will solve the problem for you.
This is impossible to achieve in a clean/robust kind of way because anything you position as fixed is done so within the context of the main browser (and within any scrollbar it has), but because you removed the main body scrollbar (and you must because you cannot z-index position on top of it) it doesn't think anything is there, yet you have this div below it so the only options you have are to use fixed margin and height for the two elements or use some javascript method to determine the correct width of your top div.
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 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).
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>