I'm trying to get my footer to stick to the bottom of my page. I've followed loads of different tutorials (most of them very similar) on sticky footers, but none of them have worked for me. For some reason the footer sticks to the bottom of the SCREEN instead of the PAGE...
This is the layout of divs in my HTML:
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
This is my CSS:
html, body {
height: 100%;
#wrapper {
min-height: 100%;
position: relative;
}
#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}
#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}
Try this
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{
min-height:100%;
position:relative;
}
#header {
background:#00ff0f;
padding:30px;
}
#main{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
height:100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="main">
Some Content Here...
</div>
<div id="footer">Footer</div>
</div>
DEMO.
I know this is old but these days you can use flex-box which allows for variable footer height
html, body, #wrapper{
min-height: 100vh;
}
#wrapper{
display: flex;
flex-direction: column;
}
#main{
flex-grow: 1;
}
Related
Nothing I've tried really works I need simple code I can use to make it be on the bottom of that div instead of making the whole div a grid and just making the grid at the bottom house the text. I'm new to html/css so I only know what's really on the page to be honest. The vertical align-bottom isn't working either...
<!DOCTYPE html>
<html>
<head>
<title>Making a Shop Landing Page</title>
</head>
<style>
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background-color:#eee;
}
main{
height:100%;
}
html, body {
height:100%;
margin:0;
}
.container{
display:grid;
grid-template-areas:
"header header header"
"ads main main"
"footer footer footer";
height:100%;
width:100%;
grid-template-rows:20% 70% 10%;
grid-template-columns:20% 80%;
}
.grid-item{
border:black solid 3px;
}
.header{
grid-area:header;
}
.ads{
grid-area:ads;
width:100%;
}
.main{
grid-area:main;
height:100%;
}
.footer{
grid-area:footer;
}
#navbar {
height: 100px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #eee;
padding: 0;
margin: 0;
border:black solid 2px;
}
#header{
text-align:center;
vertical-align:bottom;
}
</style>
<body>
<main>
</div>
<div class="container">
<div class="header grid-item">
<h1 id="header">This is the Title</h1>
</div>
<div class="ads grid-item"><p>awdsmapwdsmaswdpawmda wdawpmds awpdsmawp dmaw </p></div>
<div class="main grid-item">
<h1>awdawdaswdawd awdasw daw dsawd awd aw dawd awda dwa daw daw wdaw;lds anmw;dsnaswsd nwa;lds naw;kd nwa;ds naw;dn aw awdknawidgawpidhawd'ajdswn'awnda'swnda'wdnasw'dnaw'dnawds'awndanlw'dl </h1>
</div>
<div class="footer grid-item"></div>
</div>
</main>
</body>
</html>
For making it be at the bottom of your div, you can make the container that it is in position relative and then your text to be positioned absolute and put it where exactly where you want to
.header{
position: relative;
}
#header{
position: absolute;
bottom: 0px;
left: 50%;
}
Try adding the given code.
.header{
grid-area:header;
display: flex;
align-items: flex-end;
justify-content: center;
}
I am trying to create a full height responsive site with a sticky fixed height footer and no scrolling. I have this so far...
body, html {
height:100%;
width:100%;
padding:0;
margin:0;
}
.content {
text-align:center;
background:wheat;
height:calc(100vh - 100px);
}
.image_container img {
max-width:100%;
height:auto;
}
footer {
position:fixed;
bottom:0;
height:100px;
background:teal;
width:100%;
color:white;
text-align:center;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
The image is causing everything to scroll, how can I make this image height responsive?
This may helpfull
body, html {
height:100%;
width:100%;
padding:0;
margin:0;
}
.content {
text-align:center;
background:wheat;
height:calc(100vh - 100px);
}
.image_container img {
max-width:100%;
}
.image_container{
height:100%;
}
footer {
position:fixed;
bottom:0;
height:100px;
background:teal;
width:100%;
color:white;
text-align:center;
}
img{
max-height:100%;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
I recently created a similar page and once I had to insert features like scroll-steps and navigation buttons, I found fullPage.
Try fullPage.js - I think it has all the functionality build in you need.
It is quite easy, using flex.
I set .container to be a flexbox, setting .content to a dynamic height of 100% and the footer to a fixed height of 100px.
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.content {
text-align: center;
background: wheat;
height: 100%;
}
.image_container img {
max-width: 100%;
height: auto;
}
footer {
position: fixed;
bottom: 0;
height: 100px;
min-height: 100px;
background: teal;
width: 100%;
color: white;
text-align: center;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
go with this one
just give a
.image_container{height: 100%;}
.image_container img { max-height: 100%; max-width: 100%;}
and you are good to go this approach keep image aspect ratio
as you can see in sample
like this
body, html {
height:100%;
width:100%;
padding:0;
margin:0;
}
.content {
text-align:center;
background:wheat;
height:calc(100vh - 100px);
}
.image_container{
height: 100%;
}
.image_container img {
max-height: 100%;
max-width: 100%;
}
footer {
position:fixed;
bottom:0;
height:100px;
background:teal;
width:100%;
color:white;
text-align:center;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
How i give 100% height to div when i give height 100% (It's not working) then i give height 100vh then min-height 100vh but it create extra space and div become more larger than required i also try max-height but not working. i want to give height 100% of element that any any small device it. In this example height is become greater than screen and make a scroll. how i get only 100% with out scroll with out missing any element.
<!doctype html>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
<style>
.header
{
width:100%;
height:60px;
background:#000;
}
.main
{ width:100%;
min-height:100vh;
background:#C00;
}
#footer
{width:100%;
height:100px;
background:#0C3;
}
</style>
You can use calc() to take off the values of header and footer:
body {margin:0}
.header {
height: 60px;
background: #000;
}
.main {
min-height: calc(100vh - 160px);
background: #C00;
}
#footer {
height: 100px;
background: #0C3;
}
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
you can try like this
you have to give the parent always a defined height if not it is not working if you work with %
body{
margin:0;
height:100vh;
}
.header {
width: 100%;
height: 60px;
background: #000;
}
.main {
width: 100%;
height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
background: #C00;
}
#footer {
width: 100%;
height: 100px;
background: #0C3;
}
<body>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
</body>
If you don't need Internet Explorer then you could use flexbox
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
background-color: cyan
}
.header {
background-color: red;
padding: 10px;
text-align: center;
}
.footer {
background-color: green;
padding: 10px;
text-align: center;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="main">Content</div>
<div class="footer">Footer</div>
</div>
I'm trying to create a fluid layout site which also has a left sidebar with the following properties:
It doesn't scroll when the main content does
It takes up the full height of the page
The only layout I have seen is this one: http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/
HTML
<div id="page">
<header id="sidebar">
//SIDEBAR CONTENT HERE
</header>
<article id="contentWrapper">
<section id="content">
//CONTENT HERE
</section>
</article>
</div>
CSS
html {
overflow: hidden;
}
#sidebar {
background: #eee;
float: left;
left: 300px;
margin-left: -300px;
position: relative;
width: 300px;
overflow-y: auto;
}
#contentWrapper {
float: left;
width: 100%;
}
#content {
background: #ccc;
margin-left: 300px;
overflow-y: auto;
}
However I think this is a poor solution because not only does it require negative margins but it also requires javascript.
Is there a better way to achieve this?
Demo
css
#sidebar {
position:fixed;
height:100%;
width: 300px;
background-color: #ccc;
overflow-y: auto;
}
#contentWrapper { /* not using margin */
box-sizing:border-box;
background-color:#eee;
position:absolute;
left:300px;
width:calc(100% - 300px);
min-height: 100%;
}
#contentWrapper { /* using margin */
box-sizing:border-box;
background-color:#eee;
margin-left: 300px;
/*position:absolute;
left:300px;
width:calc(100% - 300px);*/
min-height: 100%;
}
html,body,#page {
width: 100%;
height: 100%;
}
You can do something like this: http://jsfiddle.net/9U2U4/
Demo with lot of Text: http://jsfiddle.net/9U2U4/1/
CSS:
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
}
#page {
height: 100%;
}
#sidebar {
position: fixed;
left:0;
top:0;
bottom:0;
width: 30%;
background-color: #eee;
}
#contentWrapper {
margin-left: 30%;
min-height: 100%;
position: relative;
background: #ccc;
}
#content
{
padding: 10px;
}
HTML:
<div id="page">
<header id="sidebar">// Sidebar</header>
<article id="contentWrapper">
<section id="content">
<p>Text</p>
</section>
</article>
</div>
I have this Tow column page layout || but the problem that the footer is for the whole file
what if I want the footer to be under the right column only as the black footer in this image
I tried to chand the part
footer content
but it didnt came in the place I wanted
<style>
html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
}
#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:60px; /*This must equal the height of your header*/
}
#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}
#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}
#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}
#side-stuff{
display: block;
}
#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}
#content-stuff{
width: auto;
height: auto;
}
#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="main">
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>
<div id="content">
<div id="content-stuff">
content stuff
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</div>
Hope this helps
<style>
#wrapper{
margin:0px auto;
padding:0px;
width:1000px;
}
#header
{
margin:0px;
padding:0px;
width:1000px;
height:100px;
background-color:lavender;
}
#content
{
margin:0px;
padding:0px;
width:1000px;
}
#side
{
margin:0px;
padding:0px;
width:250px;
height:700px;
background-color:grey;
float:left;
}
#main
{
margin:0px;
padding:0px;
width:750px;
height:700px;
float:right;
}
#main1
{
margin:0px;
padding:0px;
width:750px;
height:650px;
background-color:pink;
float:right;
}
#footer
{
margin:0px;
padding:0px;
width:750px;
height:50px;
background-color:black;
float:right;
}
</style>
<div id="wrapper">
<div id="header"> Header </div>
<div id="content">
<div id="side">Side</div>
<div id="main">
<div id="main1">Main</div>
<div id="footer">Footer</div>
</div>
</div>
</div>
put the div of the footer inside the div of the side
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
<div id="footer">
footer content
</div>
</div>