I've lost count of how many posts I've read on this subject. Frankly I am not a CSS expert. I cook-booked a 'sticky footer' that works perfectly in Firefox and Chrome but fails in IE9 and above. (Its position in IE varies with the height of the browser window. In other browsers its fixed to the bottom.)
The css is as follows:
#footer {
position:relative;
margin-top: -150px;
height: 150px;
clear: both;
bottom:0px;
}
The html (in the master page) is as follows:
<footer>
<div id="footer">
<div style="margin: auto;">
</div>
<br />
<div style="text-align: center; margin: auto; margin-left: auto;
margin-right: auto; width: 100%; margin-bottom: auto">
<p>© Copywrite blurb and date here</p>
</div>
</div>
</footer>
Suggestions?
I am a bit of a noob too, but I feel like it is the 'position: relative' which could be messing up your code. Is your footer wrapped into another div?
Maybe try wrapping your page in a content div with a height of 100%, then position relative to this, rather than the page.
Or perhaps set the body and html to have height: 100%. What is the current height of the element surrounding your footer?
Just throwing a few ideas out there. :)
For classic web sites you want to use position fixed. For a more modern, fluid, app like web application position absolute works well. You can see the latter on my demo web app, http://movies.spawebbook.com.
#footer {
position:absolute;
height: 150px;
clear: both;
bottom:0;
left: 0;
right: 0;
}
Related
In IE11, footer is displayed at middle of screen rather than on bottom. I am using below CSS which was working file until we upgraded the browser to IE11.
#footer {
clear: both;
height:45px;
position: absolute;
bottom: 0;
left: 0;
border: none;
width: 100%;
}
Note:- My page has a Tab views & we are using Layout template in MVC. Please suggest some solution.
There is nothing wrong with your CSS. Based on experience, the only issue I can foresee, is that your footer has a parent element with the property position: relative;
This causes the "absolute" positioning to be relative to the parent and not the window itself.
Also, you probably don't clear:both;. If you have floating elements inside footer, just add overflow: auto; and that will clear your floats!
It may now be less relevant as IE seems to be less and less popular, but the only thing IE properly recognizes as far as vertical positioning is concerned is div. So what seems to have helped in my case is brute-forcing all elements, including the footer, into its own div:
<div style={{position: "sticky", top: "0px", zIndex: "10"}} >
<Nav />
</div>
<div>
<C {...props} {...cProps} />
</div>
<div style={{marginTop: "20px"}}>
<Footer />
</div>
This question already has answers here:
Fix footer to bottom of page
(14 answers)
Closed 8 years ago.
I have some problems with sticking my footer to the bottom of the page. At the moment when I preview it in Internet Explorer, it is centered under the rest of the content, but not at the bottom. When I want to preview it in Chrome, it keeps standing next to some other content. Could someone explain to me why and how to fix this? Below, I've included some code for reference:
HTML:
<footer class="mainFooter">
<p>Copyright © www.baica.nl </p>
</footer>
CSS:
.mainFooter{
display:block;
width:100%;
height:50%;
margin:20% auto;
color:yellow;
text-align: center;
}
If I understand your question properly, you want to make your footer stick to the bottom of the page no matter the height of its contents. To achieve this you can use this CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
color:yellow;
text-align: center;
}
Then adjust your page to follow this HTML structure
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
You also mentioned that your footer floats to one side or the othr beside other content. I am assuming this is on a multi-column layout. In which case you should utilize clear: both
.footer, .push {
clear: both;
}
Where is the rest of the html. The footer I assume is in a container and that container has to span the height of your window using something like
min-height: 700px
then in your css you set the
display: table-cell;
vertical-align: bottom;
or
position: absolute; bottom: 0;
look into the browser prefixes for your css code, and style it for each browser to prevent errors in the rendering of your html/css. Take a look at css3 schools browser support for more information, hope this helps
I am making a portfolio website at www.magalidb.0fees.net and I am having some issues with correctly displaying my website in several browsers. The issue is that in some browsers, only the bottom half of the content (which is inside a container) is visible, and the top half is somewhere above reach, at the top of the browser window. To see an example, try opening my website in Firefox, Opera or Internet Explorer.
There are some validation errors, but those are not that urgent. None of those errors is related to the behavior of the website. The site is written in HTML5 by the way, and uses both regular CSS and CSS3.
The issue seems to be with the vertical centering. I center the content of the container both horizontically and vertically.
To center the container horizontically, I used the following CSS:
#container {
min-height: 100%; /* To make sure it reaches the bottom of the browser page */
width: 940px;
margin-left: auto; /* Center horizonticallly */
margin-right: auto; /* Center horizontically */
overflow: hidden;
overflow-y: hidden; /* Vertical scrollbar fix for IE */ }
The vertical centering has the following CSS:
#valigner {
width: 720px;
position: absolute;
top: 50%;
bottom: 50%;
height: 500px;
margin-top: -45%;
margin-bottom: -45%;
margin: -40% 0 0 220px; }
The 220px is only so that the content and header won't stick behind the sidebar.
This is a general layout of the code in the body of my index page:
<body>
<div id="container">
<div id="sidebar" class="left">
<?php include('sidebars/sidebar.php'); ?>
</div>
<div id="valigner">
<div id="sidebar-bottom" class="left"></div>
<div id="head" class="right"><h1>Magali's portfolio</h1></div>
<div id="main" class="right">
<div id="content-textbox">
<div class="intro-left">
Text comes here.
</div>
<div class="intro-right">
<img alt="Me!" class="resizeProfile" src="images/magali.jpg">
</div>
</div> <!-- Closing of div content-textbox -->
</div> <!-- Closing of div main -->
<div id="footer" class="right">
<?php include('language.php'); ?>
</div>
</div> <!-- Closing of div valigner -->
</div> <!-- Closing of div container -->
</body>
Please check out my website (http://www.magalidb.0fees.net). It displays correctly in Chrome and Safari, but incorrectly in Firefox, Opera and Internet Explorer.
I'm very puzzled about this, so any help is very welcome.
!!!EDIT!!!
I found it! It works perfectly now.
I replaced the code from both container and valigner, to the following:
#container {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
#valigner {
position: absolute;
left: 50%;
width: 940px;
margin-left: -470px;
height: 540px;
top: -270px
}
The code explains itself, it's just so logical. I searched for an alternative method on centering content horizontally and vertically and found this. I feel silly now because I used this method before, yet I neglected it because I thought it was outdated...
Thank you guys for your help anyway! It is greatly appreciated. ;)
PS: I can't answer my own post. I tried, but I get a notification: "Users with less than 10 reputation can't answer their own question for 8 hours after asking. You may self-answer in 5 hours. Until then please use comments, or edit your question instead.".
So I edited my question, like the notification suggested me. I plan on editing the question again after those 5 hours and post an answer the correct way, but until then I can't do better than this. Sorry!
I know you've answered your question, but I'm a bit perplexed about how you've coded your site. There may be a valid reason for it, and if so, a moderator can delete my comment, but I don't think you need all the positioning stuff, especially on both the #container and #valigner elements. In fact, I reckon you could do it using 2 attributes on the #container elements, not using any messy position: absolute; techniques or anything. Here is my suggestion:
#container {
width: 940px; // or whatever you want the width to be. I think this is what you specified originally.
margin: 25px auto; // Centre the design in the middle of the page and put it 25px from the top and bottom of the browser window.
}
I reckon that's it. You could delete #valigner and just use this. If you carry on using position: absolute; everywhere, especially on your top-most containing elements, it will all start to get very messy later on.
I've been using http://ryanfait.com/sticky-footer/ and it works great until you need a margin/padding at the top of the page. The design I'm working with has a patterned body and all the page content is in a white box that starts 15px from the top. I still need a footer that sticks to the bottom cross browser. Any ideas?
UPDATE:
Thanks for all the ideas but noting works perfectly. Adding a margin to a sub element of the wrapper puts in an un-nessary scrollbar: Working example: http://jsfiddle.net/cronoklee/p2cPD/
If you're open to scrapping the sticky footer you've been using, here's how I would go about making one from scratch.
HTML
<div class="wrapper">
<div class="content">
... Your Content Here ...
</div>
</div>
<div class="footer">
... Your Footer Here ...
</div>
CSS
.wrapper {
background: #eee;
padding: 15px 0 100px;
}
.content {
background: #fff;
}
.footer {
background: #ccc;
bottom: 0;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
That should work cross browser. The only nuance about this to be aware of is that position: fixed doesn't work in IE 6. Any improvements are welcome :)
Could you apply a margin-top to the body?
body{
margin-top:15px;
}
This works with firebug on the page you linked to.
A solution without adding a scrollbar. Make these adjustments:
.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}
.download{
top:175px;
}
Well, I just found this thread since I have had the same problem ten minutes ago and I'd like to share my solution to the problem with "unnecessary scrollbar caused by vertically-down-shifted footer caused by my header-div with margin-top: 20px, because I just want it to be 20px from the very top of the page", which I came up in the meantime.
Just change your .content{margin-top:15px;} to .content{padding-top:15px;} and it should work. The scrollbar should disappear and the content has it's distance from the top.
As seen here: http://jsfiddle.net/p2cPD/24/
Yes - it will expand the content-div's background, but if you don't want it there it can be solved by using some transparent png of some sort or whatever.
Also, according to the http://ryanfait.com the <div class="push"></div> thing should be at the end inside wrapper-div and after content-div, not inside content-div.
I have a CSS sidebar that will display links on my website. However, it does not fill the full page height as I want. How can I make this work?
JSFiddle: http://jsfiddle.net/Pw4FN/
The easiest way is simply to do:
height: 100vh;
Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.
there is a much easier way that I thought of yesterday.
Go have a look at the website I'm busy with: http://www.atlm.co.za/aboutconcepts.html and look at the sidebar to the right in blue.
This is easily accomplished by having that sidebar as the main container nad the larger white content area to the left as a floating object...
Quite simple, just remember to clear the float to have the blue main container extend down to the bottom.
<div class="maincontainer">
<div class="maincontent_blue">
<!-- Title -->
<!-- Title__end -->
<div class="mainleft">
<h1 style="text-align:center">About Concepts</h1>
<p><img src="images/aboutlogo1.png" width="500" height="284" /></p>
<p><img src="images/aboutmp.png" width="500" height="284" /></p>
<p><img src="images/aboutp1.png" width="500" height="284" /></p>
<p><img src="images/aboutp2.png" width="500" height="284" /></p>
<p><img src="images/aboutlogo2.png" width="500" height="284" /></p>
<p><img src="images/aboutlogo3.png" width="500" height="284" /></p>
<p> </p>
</div>
<p> </p>
<p style="padding-top:40px">We designed a About Concepts' new logo for them in a record time and they were greatly impressed with our service.</p>
<p style="padding-top:185px">After the logo design, they needed us to design presentational tools for their sales people. We then sat down with the Marketing Manager, Sales Manager and a few of the sales people to really understand what the company was all about and how we were to approach the project and also how we could compliment their excellent sales team with tools that would almost do their jobs for them.</p>
<p style="padding-top:600px">After satisfying their needs and after some time they >came back to us and asked us to design a new logo that would shift trends as they were >moving into new offices with a modern design. We jumped to the opportunity to greatly >improve their already fantastic logo. This is what we came up with. We later heard back >from them and all the compliments they were getting on the great new logo. They >"stood from the crowd" as the owner stated.</p>
<div class="clearfloat"></div>
</div>
<!-- end .maincontent_blue -->
</div><!-- end .maincontainer -->
That is the html I used and the css is as follows:
.maincontent_blue {
margin-top: 0;
padding-bottom: 0;
width: 100%;
background: #00D7E8;
color:#fff;
}
.mainleft {
height: 100%;
float: left;
background: #fff;
padding-top: 5px;
padding-bottom: 10px;
width: 600px;
margin-right: 15px;
margin-bottom: 0;
}
This was quite simple to do and I suppose anyone will be able to follow my code..
position:absolute;
width:100px;
height:100%;
top:0;
left:0;
the element cant be floated, or it will not fill whole page, and cant have padding at top or bottom, the padding will cause scroll. If you need the padding top, set to the child element, like UL.
I added ul and moved the padding from the outer div to margin on the ul - now the scrollbar is gone (at least I think that was the problem?)
see http://jsfiddle.net/Pw4FN/1/
I learned this from Wordpress dashboard sidebar.
Simply write these :
html{
height:100%;
}
body{
position: relative;
min-height: 100%;
}
.sidebar{
background: yellow;
height:100%;
position: absolute;
}
I hope this help you ♥
A very late reply, none of the above helped me. I have a working solution, may help someone. using a flex along with view port for min-height helps to cover the sidebar to the whole page.
this code assumes having a top-bar of height 51px;
.user-content {
display: flex;
}
.user-content .side-bar-content {
flex : 1;
flex : 0 0 220px;
background: #f1f1f1;
min-height: calc(100vh - 51px);
//min-height: 100vh; // without topbar
}
.user-content .app-user {
flex : 2;
padding: 0 0 15px 15px;
}
You cannot float an absolute positioned element. Don't forget to set the height of both the body and the html nodes to 100%, and use a padding on the body element to avoid overlapping.
body, html {
height: 100%;
}
body {
padding-left: 200px;
}