It's a little bit strange.
In my 2 HTML pages i have a footer that is equal to both but in one, that is shorter than the other, the footer goes up and leave a space at the bottom of like 30px.
(In the longer page the footer stay attached to the bottom)
Here is the css of the footer and the body:
footer{
background-color: #0b2239;
position: absolute;
width: 100%;
}
html, body{
min-height: 100%;
}
I've tried to resolve it by adding bottom: 0; but in the longer page the footer go over the other element in the page
You just need to add to the footer the value bottom: 0;
footer{
background-color: #0b2239;
position: absolute;
width: 100%;
bottom: 0;
}
html, body{
min-height: 100%;
}
Related
I wanted to create a footer which need to stay on the bottom of every screen, i have done it but the problem is it breaks on landscape view on small devices but on the portrait view it is working fine.
body, html {
height: 100vh;
position: relative;
}
.footer {
background: #0066cc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="footer">
<div class="content">
<h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
</div>
</div>
i want it to stay at the bottom of every device and on landscape also!!
I have done it with this code it stays on the bottom of the page on landscape as well as portrait
-first i did css on my container (main div)
.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }
-second i change footer css
.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }
and it fixed my problem .
by the way you don't get this problem every time but when you don't have enough content for your page footer will leave it's place and you'll get extra space on different devices even on the web view but when you have enough content for a page then footer will always stay at the bottom.
You just need to change the way you position the footer. As you wanted in same position, the fixed instead of absolute will do the job.
body,html{
height: 100vh;}
.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }
I tried having my footer stick to the bottom of the page, but the more content I add to my body, then it just goes out of bounds. I can't see a fault in my CSS, so hopefully one of you will be able to sort it.
.footer {
padding-bottom: 0;
background: gray;
width: 100%;
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
Here is a JSFiddle: https://jsfiddle.net/367apj76/
Many Thanks for the help.
Remove the position: absolute; from .footer
UPDATE:
You should put everything but the footer in a div with the following CSS:
min-height: calc(100vh - *footer-height*px);
and the footer should go right after this div.
This will work because the new div cannot be smaller than the window size minus the footer, but grows with the window (that's what vh is for).
This is a sample HTML page:
<html>
<body>
<div class="content">
</div>
<footer> </footer>
</body>
</html>
This is my style sheet:
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
.content {
width: 8cm;
position: absolute;
background-color: #ff0;
height: 15cm;
}
footer {
position: absolute;
bottom: 0;
background-color: #f00;
width: 100%;
}
This is how it looks like:
My problem is that I want the red footer to be at the bottom of the page (not the bottom of the viewport), assuming that the .content is of an variable height actually. Is that possible without JavaScript?
This Fiddle shows a footer that is always either at the lowest point on the page or on the bottom of the viewport.
The DIV is positioned at the bottom of the viewport when the content does not fill the page, and stays below the content when the content gets taller than the viewport.
To accomplish this, use a min-height on the body like this:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
footer {
position: absolute;
bottom: 0;
}
Tested in Safari 8.0.3.
This should be easy and has been answered 100 times, but for some reason it's not working in my code.
I want to have my footer always be at the bottom of the page, but for cases when the content doesn't fill up the full page, it should still sit at the bottom (eg: not always fixed at bottom:0)
HTML
<div class="home-wrapper">
<div ui-view="nav#home"></div>
<div ui-view="content#{{$state.current.name}}" class="content-div"></div>
<div ui-view="footer#home" class="footer-bar"></div>
</div>
CSS
html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
width: 100%;
min-height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.home-wrapper {
min-height: 100%;
position: relative;
}
.footer-bar {
height: 3em;
width: 100%;
overflow:hidden;
position: absolute;
bottom: 0;
left: 0;
}
I thought by setting the min-height on the home-wrapper we'd have no issues... it works fine when the content area is large, but on elsewise it's shoved right up at the top of the page! I suspect this might be related to the fact that I'm using AngularJS with UI-Router for state routing, and my CSS is loaded on a per-page basis.
You can see a live example up at: http://letsdolunch-web-dev.azurewebsites.net/, click the Legal link at the bottom to see the issue present itself, http://letsdolunch-web-dev.azurewebsites.net/#/legal
I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.
However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.
I have tried:
Setting the height of the body and html to 100% in CSS.
Setting the height of the content to 100% in CSS, but that made the content fill the window.
Styling the footer as height:auto 0 in CSS.
...but none of these have worked.
I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.
Thank you in advance.
If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f09;
}
#content{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: #f90;
}
#content iframe{
width: 100%;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
<iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>