I have not been able to get any of the solutions to work.
The footer keeps on leaving a gap at the bottom of this page
The footer leaves a gap of white space.
I have tried
#footer {
position:absolute;
bottom:0;
}
and it seems to make it worse...
Any ideas?
UPDATE:
still can't get it to work. tried setting the height of the body and wrapper. tried all code below. and it just ends up overlapping
Try this...
#footer-wrap {
position: fixed;
bottom: 0;
width: 100%;
}
Here you go:
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
}
Based on your question I don't think you want to use position: fixed because if your page were to get any taller (to the point that vertical scrolling was required), the footer would stay attached to the bottom of the page wherever you went. I think what you want is this:
<style>
.footer-wrap{position: absolute; bottom: 0px; width: 100%;}
body{overflow: hidden;}
</style>
You need to add the overflow: hidden on the body because the 100% width on the footer will create a horizontal scroll.
The footer is an automatically defined element in HTML5 you basic page should look like this and everything should be place
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place title here</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
A good CSS configuration for each could be something like
<style>
header {
background-color:place color here;
}
nav {
background-color:place color here;
}
main {
background-color:place color here;
}
footer {
background-color:place color here;
}
</style>
NOTE:Footer and header should be same color as the body color makes page more presentable
I was able to fix it by setting a bottom margin in the post
article.post-72.page.type-page.status-publish.hentry {
margin-bottom: 124px!important;
}
and adding some height and overflow the the footer
.footer-wrap {
height: 115px;
overflow: hidden;
}
Try this:
#footer {
position:fixed;
bottom:0;
width:100%;
}
I believe that is what you are after. Position absolute relates to the document whereas position fixed relates to the screen view.
EDIT
Assuming your footer has a height of 50px say, you need to add a margin to an element that is above the footer in the DOM, some sort of wrapper ideally that appears on every page of your site (this makes the most sense structurally.
Even if you add this element yourself assuming you have access to a template.
So it could look something like this:
<header></header>
<div class="content">
//wrap all of your main content block here
</div>
<footer></footer>
Then for the css add margin-bottom:70px to the .content wrapper
I might be a little late, but I stumbled upon this today and I know the solution for it.
Just use: display:flex;
This'll make this white space vanish. Hope this helps someone.
Related
I have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
Here's my footer css:
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
like so
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.
To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.
I suggest you read more about CSS positioning before trying to work on the issue further.
I have an image that is 115px that I want at the very bottom of my page. I searched online how to make it stay at the bottom of the page always and got a lot of complicated answers. I made with code of my own one that works (at least in my browser). I realize it might be an immature way to do it, and wanted to see if there were any potential problems with it. Here is my code
<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
</div>
Here is how you do the footer always at the bottom of page. You can replace footer with <div id="footer">...</div>, but I prefer HTML5 footer.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body { height: 100%;}
footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5);
position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
you may want to consider what will happen if the body text is as long as the viewport height. The text might go behind the fixed footer and you may not be able to see it
I would recommend;
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
then make sure to give the div wrapping all the content has a padding bottom the same as the height of the footer.
#main { padding-bottom: 150px; } /* must be same height as the footer */
In my website, I have a footer that has a height of 100px and the css for the footer looks something like the following:
.footnote {
width: 95%;
height: 100px;
position: fixed;
background: url('../images/coolfooter.png') bottom center;
bottom: 40px;
left: 30px;
}
The problem is if I have too much content on my web page, the content starts overlapping with the footer.
I want to restrict the content to only appear above the footer always somehow, so that no content gets overlapped with footer.
How can this be done?
Have you tried z-index? As others have said it's a bit hard to say without looking at the html. I'm not 100% sure what you're asking for.
You basically need to make sure that either the content has a bottom margin greater than or equal to the height of the footer, or (if the content is in a container of some sort) that it's container has a bottom padding equal to or greater than the height of the footer.
Here's a fairly popular reference site for doing this so-called "sticky footer": http://www.cssstickyfooter.com/
Adding overflow:auto to div.content should be sufficient.
<html>
<head>
<style type="text/css">
div.header
{
top:0px;
height:100px;
max-height:120px;
min-height:100px;
}
div.content
{
height:600px;
max-height:750px;
overflow:auto;
}
div.footer
{
height:100px;
max-height:120px;
min-height:100px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
i want that my text eg. "registration" which is the topmost text and is a heading,to remain fixed on the screen and then when i scroll "registration" should remain intact at the top of the screen and all other text should go beneath it while scrolling. how can i do this???? please reply soon... Thanks to all for your time in advance.
I'm not sure do I understand correctly what you are trying to achive, but i'll give it a shot. If you are trying to create fixed position header you can use the same technique like in fixed footer. You can find more info in this fixed footer documentation
And here goes the example code:
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed footer</title>
<style type="text/css">
body{
margin:0;
padding:0 0 <length> 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:<length>;
}
#media screen{
body>div#footer{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="footer"> footer </div>
<div id="content"> content </div>
You can use position: fixed; in CSS. It's recognized by pretty much every browser, except for IE6... but you shouldn't try to make stuff work there anyway.
.stayOnTop
{
position: fixed;
top: 0; /* to place it on top */
left: 0; /* to place it in the left corner, that'd be the most logical place; although this obviously isn't necessary, you could want to put it in the right corner or somewhere else and whatever /longcomment */
}
You want probably want to set the css attribute position to fixed for this. Of course this behaviour is somewhat commonly seen with most browsers on most systems simply with the tag!
You should set your element's position property to "fixed" in your css.
#registration_element
{
position:fixed;
top:0px;
}
this link should help
Use style position:fixed.
Here comes the example.
<style>
#idOfDiv {
position: fixed;
width: 100px;
background: #FFF;
z-index: 999;
}
</style>
<div id="idOfDiv"> TEST </div>