I want a page with sticky footer which's scrollbar does not overlap header, only body. Like I do in this fiddle. But now i want that content (dotted box) has 100% height of body.
html
<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
<div class="content-container">
<div class="my_content">Full height ??</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</div>
css
html,
body {
height: 100%;
overflow: hidden;
}
body {
padding-top: 50px;
}
.container {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.content-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
padding-top: 15px;
padding-bottom: 15px;
min-height: 100%;
margin-bottom: -60px;
}
.footer {
position: relative;
width: 100%;
background-color: red;
}
.footer,
.push {
height: 60px;
}
.my_content {
border: 1px dotted;
width: 100%;
height: 100%;
min-height: 200px;
min-width: 300px;
}
You can suggest any other template for using sticky footer.
You can set .my_content to 100% of the viewport height minus the height and (vertical) padding of the other elements (i.e. header height, footer height, top and bottom padding on .content-container) on your page like so:
.my_content {
min-height: calc(100vh - 140px);
}
DEMO
If your header and footer have variable heights, this won't work though.
use this example for sticky footer it does not overlap header
http://jsfiddle.net/0dbg9ko2/12/
.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}
and i can some changes in html
Related
I need to create a page where I would have a 100% wrapper between header and footer elements. The wrapper is a general content view where I will be adding templates. Apart of having the wrapper 100% height I need to have a first section in the wrapper also with 100% height.
The main problem is that I cannot position the footer relatively after the wrapper. It stays somewhere in the middle. See fiddle for example.
HTML
<header ui-view="header"></header> <!--Fixed Height/Relative-->
<div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative-->
<section></section> <!--100% Height/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
</div>
<footer ui-view="footer"></footer> <!--Fixed Height/Relative-->
CSS
body{
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html{
height: 100%;
}
div{
position: relative;
height: 100%;
width: 100%;
}
section:first-child{
height: 100%;
}
section{
position: relative;
display: block;
height: 400px;
width: 100px;
border: 1px solid black;
}
header{
position: relative;
height: 100px; width: 100%; background: red;
}
footer{
position: relative;
height: 100px; width: 100%; background: red;
}
JSFiddle
I believe the div you have around your sections is what's causing you some trouble. Check out the snippet below. If you place only your first section and the header in that div, you can accomplish what you want by putting height 100% on that div.
Note that without that div, your :first-child pseudo selector won't work because that section is no longer the first child of it's parent (header is). So I added an ID to it simply so I can reference it in the CSS.
So now the div is 100% of the height, header is a fixed height, and section1 is at 100% filling the remainder of the div.
body{
margin: 0;
padding: 0;
height: 100%;
background:green;
}
html{
height: 100%;
}
div{
height: 100%;
width: 100%;
background: pink;
}
section {
display: block;
height: auto;
width: 100%;
border: 1px solid black;
}
section#section1 {
height: 100% !important;
}
header{
height: 50px; width: 100%; background: red;
}
footer{
height: 50px; width: 100%; background: blue;
}
<div>
<header></header>
<section id='section1'>section1</section>
</div>
<section>section2</section>
<section>section3</section>
<footer></footer>
The height:100% you have set on the body is what's causing your footer element to be in the middle of the page. Remember that '100%' is '100% of your window height', so be careful with that. Cheers.
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'm using Twitter Bootstrap's 'sticky footer' CSS to ensure my footer appears at the bottom of my page. How can I make my content (the blue div in the example) stretch all the way down to the footer (the yellow div in the example)? I've tried making .content 100% height but that has no effect.
My CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.content {
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
My HTML
<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>
Example: http://jsfiddle.net/pjktqnmo/1/
Ref: http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css
Update: My header contains my page title so the height of the header varies from page to page.
here is a solution with no position property being used.
see snippet below:
html, body {
height: 100%;
margin: 0;
color:grey;
}
.header {
background-color:red;
}
.content {
min-height: 100%;
margin-bottom: -60px; /* equal to footer height */
background-color:blue
}
.content:after {
content:"";
display: block;
}
.footer, .content:after {
height: 60px;
}
.footer {
background: yellow;
}
<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>
More info here: sticky footer
UPDATED ANSWER Based on a Discussion with OP, where OP stated that doesn't want to have a Vertical ScrollBar, therefore here is a solution below:
What I did? Make your div .header child of div .content, with 0 changes on CSS regarding my 1st snippet above.
html, body {
height: 100%;
margin: 0;
color:grey;
}
.header {
background-color:red;
}
.content {
min-height: 100%;
margin-bottom: -60px; /* equal to footer height */
background-color:blue
}
.content:after {
content:"";
display: block;
}
.footer, .content:after {
height: 60px;
}
.footer {
background: yellow;
}
<div class="content">
<div class="header">This is my header</div>
This is my content
</div>
<div class="footer">This is my footer</div>
If your header is 30px tall, and your footer is 60px tall, this should work for the content:
position: absolute;
left: 0;
right: 0;
top: 31px;
bottom: 61px;
Set the height like this:
html, body {
height: 100%;
}
.content {
min-height: 100%;
}
http://jsfiddle.net/pjktqnmo/6/
It's working pretty well with javascript.
It also allows you to have to good height when user changes window dimensions.
Call this on page load and when user changes the window dimension:
$('.content').css('height',$(document).height() - ($('.header').height() + $('.footer').height() + `MARGIN TOP OR PADDING`) - $('.contact').height());
You could try using a table instead as a container for your page. Make sure that your <html>, <body>, and <table> elements have their width and height at 100%.
Make three rows in your table and put your header, content, and footer into each row, then make the content row 100% height so it will take up the rest of the page space.
Lastly, remove the spacing between the table cells
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.header {
background-color: green;
}
.content {
height: 100%;
background-color: cyan;
}
.footer {
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
table {
width: 100%;
height: 100%;
border-spacing: 0px;
}
td {
padding: 0px;
}
.contentCell {
height: 100%;
}
<body>
<table>
<tr>
<td>
<div class="header">This is my header</div>
</td>
</tr>
<tr class="contentCell">
<td>
<div class="content">This is my content</div>
</td>
</tr>
<tr>
<td>
<div class="footer">This is my footer</div>
</td>
<tr>
</table>
</body>
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly