Our design team has come up with a concept that uses a full background image on the landing page, but then only has the image on the footer of the remaining pages, with the main content being on a white background.
So, as a quick mock up to illustrate the concept, the landing page might be:
While the majority of the site would be:
This presents a problem because we obviously don't know the window size it's being displayed in, so it keep that footer strip consistent across all pages I presumably have to use a whole-page background image and then block most of it out in white.
I am struggling to do this in CSS (I'm a back-end developer that's been roped in to do this ). I adopted the following pattern for a sticky footer:
html{
height: 100%;
margin: 0;
}
body {
background-image: url("iStock-507452790.jpg");
margin: 0; padding: 0;
background-size: 100%;
height: 100%;
}
.wrapper {
min-height: 100%;
background-color: white;
margin-bottom: -50px;
}
.footer, .push {
height: 50px;
}
<body>
<div class="wrapper">
content!
<div class="push"></div>
</div>
<footer class="footer">
footer!
</footer>
</body>
But this just leads to the whole page being filled with the background colour specified on the wrapper.
Is there a way to get white on most of the page and just keep the strip at the bottom? I am not averse to using other sticky footer methods if necessary.
I also have changed the DOM a little. Hope this helps.
Also you can remove the footer text if you dont need it.
html, body {
margin: 0;
padding: 0;
}
body {
background-image: url('http://www.lavitaoggi.com/wp-content/uploads/2014/02/8e69oceano-acqua-bolle-aria-ossigeno.jpg');
}
.wrapper {
min-height: 90vh;
background-color: white;
}
.footer {
height: 10vh;
color: #fff;
}
<div class="wrapper">
content! loream
</div>
<footer class="footer">
footer!s
</footer>
html,body{
height: 100%;
width:100%;
margin: 0;
}
.page{
height: 100vh;
width:100%;
display:inline-block;
background-image: url('http://ulatbambu.com/images/google-images-water-background-clipart-35.jpg');
margin: 0;
padding: 0;
background-size: 100%;
background-color:blue;
}
.wrapper {
min-height: 85%;
background-color: white;
margin-bottom: -50px;
width:100%;
}
.footer, .push {
height: 50px;
background-color: transparent;
position: absolute;
display:inline-block;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
text-align:center;
padding-top:20%;
}
<body>
<div class="page">
<div class="wrapper">
content!
<div class="push"></div>
</div>
<footer class="footer">
<span>footer!</span>
</footer>
</div>
</body>
Try this
Just try this
body,
html {
height: 100vh;
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
color: #000;
font-size: 25px;
}
.footer {
color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
background: url('https://dummyimage.com/600x400/000/fff') center
center no-repeat;
background-size: cover;
}
<div class="wrapper">
content!
<footer class="footer">
footer!
</footer>
</div>
Related
When adding a footer to my page, styling is not attached to the page, even though the path's are correct. The footer never goes to the bottom, just stays underneath my content.
I've tried moving the block of code inside/outside the main container div, I've even tried downloading the template and adding my code to that, and that doesn't work either. Stock code from the Bootstrap site works. As soon as I paste it into my code it no longer is at the bottom where it should be.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
No errors besides not docked to the bottom of the page, it's like my CSS file isn't linked, I checked the paths and they are correct.
Footer is inside the body tag. The body have a margin-bottom: 60px;. So footer not docked to bottom like it should be.
Change css body margin-bottom: 60px; to margin: 0px;. Here is the complete code.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
The code you posted works fine for me in two different browsers. I suspect you have other code on the page screwing things up. Below is a complete example.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<p>And the lamb lies down on Broadway.</p>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
I am developing a site where I have a fixed header and a fixed footer. I am trying to get my content to be full page when there is not enough content and still be scrollable when there is.
What I have so far does this, but I am left with some extra space at the end of my page. How can I get rid of this extra space at the bottom?
Here is a jsFiddle: http://jsfiddle.net/0yz9nx35/1/
As you can see in the fiddle there is still a scrollbar showing empty space at the bottom of my page
My code:
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS:
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}
You can use that on the wrapper class:
height: calc(100% - 60px)
Or maybe you could change the structure of your page by something like:
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>
Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:
http://jsfiddle.net/0yz9nx35/9/
you can add overflow-y: hidden; do remove the scrollbar at the bottom.
If you want any scroll bar to be on the .content block, you can try the following.
You can make .content fixed such that the top and bottom edges are below the header and above the footer respectively.
In this approach, you may not need the .wrapper block element unless you need it for placing some background images, for example.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.wrapper {
height: 100%;
}
.header {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
background-color: #333;
width: 100%;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
height: 50px;
background-color: #333;
width: 100%;
}
.content {
position: fixed;
top: 60px;
bottom: 50px;
left: 0px;
background-color: beige;
width: 100%;
overflow: auto;
}
<div class="wrapper">
<div class="header"></div>
<div class="content">
Content goes here<br>
and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>
the end.
</div>
<div class="footer"></div>
</div>
I am not good in web-designing, I am working on a web template that was automatically generated by Adobe Dreamweaver.
I want to push the footer's DIV to the bottom of page even I have no content on the page.
This is .CSS (I have omitted some of it)
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the
}
And this is the common markup of my pages.
<body>
<div class="container">
<?php
include('templates/header.php');
include_once('templates/sidebar.php');
?>
<div class="content">
<!-- end .content --></div>
<div class="footer">
<p>This is a simple footer.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
And footer on page looks like
I have tried this for footer.
position: fixed;
bottom: 0;
width: 100%;
But then page looks like
Here is a solution that I use, its a HTML 5. But this should work for you. Just change the class and you should be good to go.
footer {
background: #000;
position: absolute;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
See Fiddle
Also you can use the fixed position approach which works just as good or better
footer {
background: #000;
position: fixed;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
Check the DEMO.
Check the 3 lines at bottom are responsible to keep the footer at bottom.
.footer {
padding: 10px 0;
background: #CCC49F;
clear: left;
/*Below 3 lines are the responsible to keep it at bottom*/
position: absolute;
bottom:0;
width: 100%;
}
you can try
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
width: 960px;
margin:auto;
min-height:100%;
position:relative;
background: #FFF;
}
.header {
height: 50px;
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
background:#5ee;
padding: 10px 0;
width: 780px;
float: left;
}
.content {
padding-bottom:80px; /* Height of the footer element */
}
.footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background: #CCC49F;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="footer">
<p>This is a simple footer.</p>
</div>
</div>
</body>
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}
I am trying to mimic the layout of having a fixed header and footer with content that fits between the two of them WITHOUT javascript or using a table. You can see what I'm looking for HERE
Actually this is simple. Here is the full code, just copy and paste it.
Credit to Jeremy (http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div).
<style type="text/css">
html, body
{
height: 100%;
padding: 0;
margin: 0;
}
#header
{
height: 100px;
color: #FFF;
background: #000;
}
#content
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
color: #FFF;
background: #333;
}
#footer
{
height: 100px;
color: #FFF;
background: #000;
}
#divider
{
height: 100px; /*Divider must be same height as Footer */
}
</style>
<div id="content">
<div id="header">
Header
</div>
Content Text
<div id="divider"></div>
</div>
<div id="footer">
Footer
</div>