Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried everything to get my fotter stick to the bottom of the page, but I keep having this blank space below it.
Here is my html structure:
<html>
<body>
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
</body>
</html>
The css:
#wrapper {
margin:0 auto;
width:1350px;
background-color:#fff;}
#main {
margin:0 auto;
width:1200px;
position:relative;}
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:absolute;
bottom:0px;
left:0px;}
Things I've tried so far:
Footer inside wrapper, wrapper with position:relative, footer with position:absolute; bottom:0px. Not working, footer appears in the middle of the main content.
Footer inside body. Same as above.
Footer outside wrapper.
Pusher
Margins and paddings for #main with same height as footer.
Pretty much everything I've researched so far.
¿Any help plesase?
Thank you in advance.
PS: Sorry for my english, I'm not a native english speaker.
SOLVED: Forgotten div inside the footer with position:relative bottom:10px that made the whole footer moove a bit upwards creating this blank space below it.
You need to set the dimensions of your body to fill the viewport html, then, your absolute positioning will work:
html{
width:100vw,
height:100vh;
margin:0;
}
Alternatively as noted in the other answer - you can set position:fixed, although this will have different behavior in terms of how the element appears in relation to your other content.
body {
height: 100vh;
width: 100vw;
margin: 0;
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
background: blue;
}
<footer></footer>
What you want is "position: fixed;" and not "absolute".
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:fixed;
margin-bottom: 0px;
bottom:0px;
left:0px;}
You code is working. I have created a jsfiddle with your code and is working fine. https://jsfiddle.net/jithinnjose/270oa889/
#wrapper {
margin: 0 auto;
width: 1350px;
background-color: #fff;
}
#main {
margin: 0 auto;
width: 1200px;
position: relative;
}
footer {
clear: both;
background-color: #484545;
height: 120px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
Try
position:fixed;
for footer or make a separate div for footer and assign the above mentioned css to that div
Try this magic with flexbox.
JSBIN
HTML
<div class="container">
<header role="banner"></header>
<main role="main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
CSS
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction:column;
}
.container {
overflow-y: scroll;
flex: 1;
}
header[role="banner"] {
height: 48px;
background-color: purple;
}
main[role="main"] {
background-color: deeppink;
flex: auto;
}
footer[role="contentinfo"] {
flex-basis: 48px;
background-color: gold;
}
Ok guys, I fixed it!!!
My stupidity has no limits. Sometimes you just focus on trying to fix one thing and you are not looking in the right place!!
The thing was I had a forgotten div inside the footer with position:relative. That was forcing my footer to go a bit upwards, creating this blank space below it.
Thank you so much for your time, really, much much appreciated, you had no chance to solve my problem since my forgotten div was not posted here, but you did made me think outside the box.
Cheers!
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 7 years ago.
After researching pure CSS ways to "sticky" my footer, I am at a loss. Here is the structure of the layout on my site:
<html>
<body class="pages">
<div id="global" class="global">
<div class="pusher">
<header class="fixed"></header>
<section id="content"></section>
<div id="footerbottom"></div>
</div>
</div>
</body>
</html>
What I have tried with some success is adding
min-height: 100vh;
to the "content" section, but it's still not good enough.
Any suggestions to make the <div id="footerbottom"></div> stick to the bottom?
You could use pure CSS with: position: absolute and bottom:0px.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 150px;
}
#footerbottom {
position: absolute;
left: 0;
bottom: 0;
height: 150px;
width: 100%;
background-color:red;
text-align:center;
}
Here is the fiddle: http://jsfiddle.net/X2NqX/332/
Or a framework like Bootstrap makes it easy: https://getbootstrap.com/examples/sticky-footer/
This is a really common problem we all come across; I do invite you to have a look at this http://ryanfait.com/sticky-footer/
Know you will have to reformat you're whole html but till now I do think it is the best solution.
Or eventually as said before you could use Bootstrap solution which is -for my concern- not really optimised for every case but could work in yours.
Try this out. I think it's a better solution than using absolute positioning especially when making a responsive site.
<body class="pages">
<div id="global" class="global">
<header class="fixed"></header>
<section id="content"><p>
content<br>
content
</p></section>
</div><!--end global-->
<div id="footerbottom">The footer</div>
</body>
CSS:
html, body {
height: 100%;
}
#global {
min-height: 100%;
}
#content {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footerbottom, #global:after {
height: 100px;
}
#global:after {
content: "";
display: block;
}
#footerbottom {
background: red;
position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
Check out the fiddle here: https://jsfiddle.net/tpbt60ff/
Better explanation here: http://www.cssstickyfooter.com/using-sticky-footer-code.html
I'm theming a Drupal website and using the vegas full screen bg.
I want to achieve the following:
But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.
Now I've:
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
position: absolute;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
background-color: rgba(255,255,255,0.70);
padding-top: 10px;
}
Normally something like this does the trick but I'm struggling to get this right...
Anybody any advice or solutions?
You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.
HTML:
<div class="wrapper">
<header class="page-head" role="banner">
Header
</header>
<main class="main" role="main">
Content
</main>
</div>
<footer class="page-foot" role="contentinfo">
Footer
</footer>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
background-image: url(http://placehold.it/1200x800);
background-position: center center;
background-size: cover;
}
.page-head {
background: red;
}
.main {
width: 80%;
margin: 0 auto;
background: yellow;
}
.page-foot {
background: blue;
}
See example on this pen.
here is a possible solution: http://jsfiddle.net/09mcoo2h/1/
as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)
To have a footer TO THE BOTTOM of the page, just set the body as position:relative.
HTML
<div id="primary-menu-bar"></div>
<div id="container"></div>
<div id="footer"></div>
CSS
body {
margin:0;
padding:0;
position:relative;
}
#container {
display:block;
width:960px;
height:1600px;
background:#eee;
margin:0 auto;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
width: 100%;
height: 60px;
top:0;
background-color: #F00;
padding-top: 10px;
}
It's really hard for us to do it like this with out HTML.
So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.
The structure should be like this:
<body>
<header></header>
<div class="container"></div>
<footer></footer>
</body>
Example on codepen
I know that this question has been asked many many times, but I haven't found a solution that actually works for me.
My html...
<body>
<div id="container">
</div>
<div id="footer">
</div>
</body>
My css....
body, html { min-height:100%;}
#container
width: 980px;
min-height: 100%;
margin: 0 auto;}
footer {
background-color: rgb(90,200,219);
height: 50px;
position: realative;
margin-top: -50px;
width: 100%; }
What is happening, is that the footer is totally sticking to the bottom of the page. But, when content is short, I still have to scroll down to find the footer which is sticking to the bottom. Can someone tell me what is wrong in my code?
I think you should fix up your CSS snippet as it has quite a number of things wrong with it. Use copy & paste to put it up here next time so your typo's don't throw anyone off.
body, html { min-height:100%; }
That should be height:100%;, but I think it might be a typo as you are saying that the footer sticks to the bottom, which it wouldn't if that line was really in your actual CSS.
#container is missing a bracket and should be #container {.
If those issues are fixed, in addition to the issues #Owlvark has pointed out. It seems to work fine here at jsFiddle. The only improvement I could think of was adding margin: 0px; to body, html, which might have been your issue as it gets rid of some extra space which would render a vertical scroll bar. But your issue seems more serious than that when you say you have to "scroll down to find the footer".
Try these methods I put together in a gist. https://gist.github.com/derek-duncan-snippets/4228927
body, html { /*body and html have to be 100% to push header down */
height:100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo
I am absolutely positioning a footer at the bottom of the browser window, using the following code:
HTML
<html>
<body>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS
#content {
margin-bottom: 20px;
background: red;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: blue;
}
This works just as intended, however when I make the browser window smaller the footer will eventually cover the main content. What is the most efficient way of preventing this?
Thanks in advance.
You need a Sticky Footer.
Demo
Here is another example using pseudo-elements. You may have some issues with old versions of IE, but it allows you to forgo un-semantic elements.
Try this:
#content {
padding-bottom: 20px;
background: red;
}
#footer {
position:fixed; //Changed to fixed
bottom:0px;
width:100%;
height: 20px;
}