How can I have a header and footer, with a MainContent div inbetween that fills up all availablel area but never stretches outside of footer or header?
So in other words, fill remaining space inbetween header and footer, but never use any more space?
I cannot think of how I could do this. I have tried many attempts but unsuccessful because the middle content div always overflows past the top of footer which I don't want happening. I want the content div to stretch only until the top of footer and that's it.
I did try setting overflow: hidden; but that just stops the scrollbars from appearing, nothing else.
No Javascript allowed.
Essentially you can set the bottom attribute to be the height of the footer and set the overflow property to auto to add a scroll bar when necessary, that will prevent it from overflowing.
e.g.,
#content {
position: absolute;
top: <height of header>px;
bottom: <height of footer>px;
overflow: auto;
}
Here's a demo:
http://jsfiddle.net/bYdgj/1/
If you position the header and footer absolutely, you then should be able to set height and width for the content div to 100%. Make sure to set position of the content div to relative.
are the header and the footer always supposed to be at that position of the screen?
if yes, then you can use the position: fixed; property for css. This way you can anchor your header and footer to the window screen.
If they are being covered by the main div, throw a z-index on it and the main content div (make sure the main content has a position attribute and a z-index smaller than the header and footer)
Once you do that, you can throw margins on your main content div to make sure that it stays in between your header/footer
There are several possible approaches:
Make header and footer absolute, then give the body a height of 100%
If you want to fill the whole page except the header and footer with a color or an image, simply change the body background-color or background-image to whatever you like and you're done
Make the content 100% and place the header and footer top: 0 and bottom: 0
Make the header and footer position: fixed, but then your header and footer would be in front of body
I would take the 2nd approach, because I can't imagine a situation where you need to fit the content exactly between header and footer.
Related
I have a long table that I don't want to show in full length, because then the footer and other elements below it are only shown after scrolling down for long.
How can I assign Header, Footer and other elements and then let the table fill up the remaining height?
By now I'm using a flexbox to distribute the free space to the table wrapper, but the table content gets shown in full length and the footer is pushed down.
I also tried to nest an overflow: auto; into an overflow: hidden; but then it's not scrollable at all.
Thanks in advance.
Have you seen w3schools - CSS Layout - The position Property guide?
Just use footer{ position:fixed } for your footer in your CSS along with other style codes.
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. A fixed element does not leave a gap in the
page where it would normally have been located.
(As Mentioned in the w3schools).
Hope you will get your solution.
You have to set the css specification for the footer element to position: fixed; If you want header to be fixed set the header css specification also to position: fixed;
just use position:fixed in ur footer css...and if u want to have scroll then use css overflow:scroll; if u want hide ur scroller in the page then use overflow:hidden;
I'm rather new to html and css and I'm currently stuck with two annoying problems.
Unless my header's position is absolute it won't cover a small area above and beneath itself. But when the position is absolute the container beneath it partially goes behind the header.
I want my header to cover the same area as it does when it's position is absolute, but I want the container's position to automatically be right beneath the header.
When I divide the footer in half, for "Start" to be on the left side and "Contact" on the right side, and add the Copyright part as a float:right everything else on the line gets pushed to the side.
I want "Start" and "Contact" to expand from the middle, out to the sides, while the Copyright part is to the far right. Everything on the same line.
The header's opacity is only to show the problem.
The line in the middle is to make sure the footer's text is in the middle.
I want to avoid a scroll bar.
https://jsfiddle.net/swvyrLnf/
header {
width: 100%;
opacity: 0.5;
position: absolute;
top: 0;
background-color: black;
color: white;
text-align: center;
}
For the header: Set the header height to 100px. Then set the margin-top of your body to 100px.
For the scroll bar: This is partially determined by the height of the body. If you want to avoid the scroll bar then you will probably need to change the body height from 100%.
For the Contact/Share links: I'd add padding left/right so that they separate from one another. To make them stretch farther you could change the size of the text. Another option would be to put them in a container of say width 40% and make the whole container a link.
The header should have overflow: hidden; and then you are fine. It's because the items inside have margin that extends the container.
I cant seem to find how to place a div (footer) at the bottom of the PAGE not the SCREEN. Many answers I saw say things like absolute of fixed but that brings the footer to the bottom of the screen and in the middle of my page.
HTML
<div id="footer"></div>
CSS
#footer{
bottom: 0;
}
So to make the question short: How do I place a footer on the bottom of the page not screen.
do you think on sticky footer? :)
or you just want footer after content, just make
footer {
position: relative;
}
If you use position:absolute; the footer will be ON the other elements and will not follow the page's element order. Than, if you use position:fixed;, sure it will be in a FIXED position, and this is not your desired result.
So DONT USE position absolute or fixed;
If your footer is the last element of the page, it will be the last element of the page automatically.
If you get the html and can't modify it manually, you can do it with JS (and JQuery but it is possible without it): jsFiddle
$(function() {
$('body').append($('#footer').detach());
});
If you don't assign any style to your footer and keep it as the last element after your body content, it will remain at the bottom of the page.
Assuming your body content is too short to cover the full height of the page (for whatever reasons, maybe no content) but you still want to keep the footer at the bottom of the page, you can read this short tutorial or see the demo. If your content is longer than the viewport height, this footer will still remain at the bottom of the page and not fixed to viewport.
Basically you need to make the content or container above the footer to occupy 100% of the height of viewport. Then, place the footer after the content / container with the following CSS :
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
What happens here is that the footer will occupy 3em height but you 'pull' it back with the same value but negative margin-top. It's cleared to make sure there's no elements on both sides but you may exclude that.
Then, to prevent it from overlapping on your content, the container of content or content itself should have padding-bottom of the same value (in this case, 3em).
I have a fixed footer on my page, which consists of text and has no background image. I also have a fixed background image which is positioned to the bottom right. I was wandering what I could do to prevent my content from overlapping with both the footer and the background image as I scroll down the page. Is there anyway to put padding between them while I scroll?
You can put a padding-bottom the height of your footer to your main container. Something like this:
.footer { height: 150px; }
.container { padding-bottom: 150px; }
This will prevent content to be under the fixed footer.
Edit: here is the fiddle - http://jsfiddle.net/2KZyv/
When you reach the bottom of the page, the footer isn't on top of the content thanks to the bottom padding on the container.
You could have a white background on the footer, cause having a transparent fixed footer is bound to give overlapping problems. As for the background image on the bottom right, just include a z-index code and push it all the way back and you'll have everything on the top.
I'm having trouble with my footer sticking to the bottom of my blog entire pages. I run into two issues. First if I use position:absolute the footer rises to about the middle of the main blog page. If I leave that alone, it sticks to the bottom but rises to the middle on the blog entire pages. Footers are something I always have trouble with.
Here's my current CSS style for the footer
footer {
text-align: left;
background-color: #f4f4f4;
padding-top: 40px;
padding-bottom: 40px;
z-index: 1;
bottom:0;
width:100%;
}
Here's a link to the page http://pixelogicblog.tumblr.com/post/41025998534/tes-post
Check out sticky footer solutions using CSS:
http://ryanfait.com/sticky-footer/
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
Try adding this to your CSS to make it take up at least the height of the window:
html, body {
min-height: 100%;
}
Have you seen this?
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Cross browser (IE6+ too) and easy to understand.
Coincidentally, your current footer isn't appearing at the bottom of the page as its position is set to relative, set its position to absolute and it will be positioned at the bottom of the page (as long as the page is no longer than the viewport). Relative positioning only sets an elements position relative to where it would be normally, for example if you set bottom: -10px on the footer element, then it would appear 10 pixels lower than it would otherwise have done (hope I'm making sense there!)
If you position something absolutely, it is positioned absolutely to either the body tag, or the next nearest parent with a position set to relative (as I understand it anyway)
Set the position to absolute
position:absolute;
It is important to note that any positioning aside from static(the default) takes it out of document flow. My way of getting around this is to add margin-bottom to the body content equal to the height of #Footer. Doing this ensures an empty space is always behind the footer equal to its height, preventing it from overlapping the content. Using absolute, and fixed can result to content overlapping.
If you want to stick the footer at the bottom, you can use min-height with viewheight unit on the header, main content and footer.
Example:
<header style="min-height: 10vh">...</header>
<div id="main-content" style="min-height: 85vh">...</div>
<footer style="min-height: 5vh">...</footer>
With this, if you have don't use all your view height with your content, the footer will still stick at the bottom. This is the best way I found to stick the footer at the bottom.
I hope it will help few people.