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>
Related
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>
I need to display the main part of the page to cover the rest of the screen without the header.
The L and R part should be 50% of the page width (having a possible padding), and also 100% of the main height (that is, the rest of the screen)
+-----------------------+
| header |
+-----------------------+
| | |
| L | R | } main
| | |
+-----------------------+
| footer |
+-----------------------+
Here is my code jsfiddle:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 10px;
/* changeable */
box-sizing:border-box;
background-clip: content-box;
}
main div {
padding: 10px;
height: 100%;
background-clip: inherit;
/* changeable */
width:30%; /* to set=50% */
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
PS.
I need to be compatible with "IE9 +" (so flexbox is not compatible)
The result at the first page load should be like in the following image:
Since the height of the header is known, you can use absolute positioning
header, main, footer {
position: absolute;
left: 0;
right: 0;
}
header {
top: 0;
height: 50px;
background-color: orange;
}
main {
top: 50px;
bottom: 0;
}
.left, .right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.left {
left: 0;
background-color: yellow;
}
.right {
right: 0;
background-color: red;
}
footer {
top: 100%;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
The issue you are having is with the padding of the div's in the main container. with a little re-factoring of your css I've managed to get it to not over lap.
Here's demo: http://jsfiddle.net/h1tz5h8q/2/
main {
background-color: green;
height: 100%;
margin:0;
padding: 1%;
}
main div {
padding: 0px;
height: 100%;
background-clip: inherit;
width:49%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
float: right;
}
Pure CSS solution, Totally responsive, Without fixing any height (header or footer)
Here's the Demo
The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)
<div class="Container">
<div class="Header">
<h1>Header</h1>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Table">
<div class="Column C1">
</div>
<div class="Column C2">
</div>
<div class="Column C3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The column width may be fixed, or not.. to you're will.
P.S:
this is an old answer of mine, that have 3 columns in it, but you can change it to 2 without any problem.
Add your left and right sections to wrapper divs to handle the 50% width and padding.
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 10px;
/* changeable */
box-sizing:border-box;
background-clip: content-box;
}
main .left, main .right {
padding: 0 10px;
height: 100%;
background-clip: inherit;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
.wrapper {
width: 50%;
float: left;
height: 100%;
}
footer {
display: block;
margin-top: 10px;
}
<div class="wrapper">
<div class="left">50% width, 100% main height left</div>
</div>
<div class="wrapper">
<div class="right">50% width, 100% main height right</div>
</div>
please try this one:
Demo
Css code:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 2%;
}
main div {
padding: 0px;
height: 100%;
background-clip: inherit;
width:49%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
float: right;
}
One of the not very elegant, but functional examples I got to manage is the one using the css height: calc(100% - 50px); function for the main element:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: calc(100% - 50px);
width: 100%;
margin: 0;
float: left;
padding: 5px;
box-sizing:border-box;
background-clip: content-box;
}
main div {
padding: 10px;
height: 100%;
background-clip: content-box;
box-sizing:border-box;
width:50%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
And here is the corresponding JSFiddle.
The downsize, is that I
have to use a fixed header height;
have to use twice this header (I think to solve this using LESS file instead of the CSS one...).
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 working on a CSS3/HTML5 Asp.NET 4.5 web application. I have the HTML and CSS the way I want it for my layout except for one issue.
The theory behind my css is the header and nav are obviously set at the top of the page, with a container with an aside and article, followed by an independent footer that I want always to be at the bottom of the page regardless of how little content there is. Everything works except that when I have the aside set to 100% height, it is 100% of the viewport height, meaning that on pages with little content, you have to scroll 260px (the combined height of the header, nav, and footer) to see it. So, to address that, I set the margins of the aside to 280px top, and 80px bottom thinking that would do the trick. It did not. So I started playing with position and clear as suggested by similar questions on SO and around the web without success.
HTML:
<body>
<form id="form1" runat="server">
<header>
<div id="logo">
</div>
<div id="title">
<h1>Nathan A. Chesebro</h1>
<h2>United States Merchant Marine</h2>
</div>
</header>
<nav>
</nav>
<div id="content">
<aside>
Vessel data
</aside>
<article>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</article>
</div>
<footer>
</footer>
</form>
</body>
CSS
*
{
margin: 0;
}
body
{
margin: 0px auto;
height: 100%;
}
form, html
{
height: 100%;
}
header
{
margin: 0px auto;
background-color: #1041a2;
background-image: url(../Images/headerHCJ.png);
background-repeat: no-repeat;
background-position-x: right;
height: 150px;
position: relative;
}
nav
{
background-image: url(../Images/nav.png);
font-family: Arial;
color: white;
background-repeat: repeat-x;
height: 30px;
width: 100%;
line-height: 30px;
margin: 0px auto;
}
#content
{
margin: 0px auto;
height: 100%;
}
aside
{
margin: 180px 0px 80px 0px auto;
float: left;
width: 250px;
background-color: gray;
height: 100%;
overflow: hidden;
position: relative;
clear: both;
}
article
{
margin: 0px auto;
padding-left: 250px;
min-height: 100%;
}
footer {
height:80px;
background: black;
clear: both;
}
Is this what you're looking for? It's just a concept so I didn't copy your exact code.
Also, I am using a calc() method in the CSS (which is getting more and more browser support but may still be restrictive on some eg. opera-mini etc.).
Here's the fiddle: http://jsfiddle.net/thePav/A3NCW/1/
CSS
html,
body {height: 100%; margin: 0; padding: 0}
header {height: 150px; background-color: #800}
header #logo {}
header #title {}
nav {height: 30px; background-color: #080}
#content {overflow: hidden; height: calc(100% - 280px)}
#content aside {background-color: #555; height: 100%; float: left; width: 25%}
#content article {float: left; width: 75%}
#footer {width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #000}
HTML
<header>
<div id="logo"></div>
<div id="title"></div>
</header>
<nav></nav>
<div id="content">
<aside></aside>
<article>Some content here</article>
</div>
<div id="footer"></div>
You can use display's 'table' and 'table-cell' values.
Check out this fiddle: http://jsfiddle.net/scottmey/j9jrz/
#content {
display: table;
width: 100%;
}
aside {
display: table-cell;
}
article {
display: table-cell;
}
CSS cannot be used to make two items the same height.
You either need to use javascript to set the height, or else use a table tag.
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>