I need to have a fixed height header, a fixed height footer, and a 100% height div sandwiched in between (it's holding a full page background image). I'm using a sticky footer, as this is a template that will also be used for pages with regular content that might overflow (without the background image). This works on the regular pages, but on the page that requires a 100% height container, it fails. I can't get the 100% height div to expand to 100%. Any help would be much appreciated.
Here's the test page showing the problem I'm having with the 100% height div: http://www.dunnandtigheinteriors.com/new/wp-content/themes/dunntighe/testhome.html
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: Georgia, Times, "Times New Roman", serif;
background: #EFEFEF;
font-size: 14px;
}
#wrapper {
min-height: 100%;
/* height: 100%;
position: relative; Required to absolutely position the footer
text-align: center;*/
}
#headerHolder {
width: 100%;
background: #FFFFFF;
height: 50px;
}
#bkgHolder {
width: 100%;
height: calc(100% - 100px);
background: #DEDFE1;
padding-bottom: 25px;
background-image: url('images/DunnTigheWhiteOverlay.png');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
overflow:auto;
padding-bottom: 25px; /* must be same height as the footer */
}
#footerHolder {
text-align: center;
font-size: 10px;
height: 25px;
color: #888888;
background-color: #0074a2;
/* position: absolute;*/
/* bottom: 0; Sit it on the bottom
left: 0;*/
width: 100%; /* As wide as it's allowed */
position: relative;
margin-top: -25px;
clear:both;
}
#footerHolder p {
padding: 5px 0 0 0;
margin: 0;
}
#pageText {
overflow:auto;
padding-bottom: 25px; /* must be same height as the footer */
}
.pageContent {
text-align: left;
width: 680px;
margin: 0 auto;
padding-bottom: 15px;
}
and html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="test.css" media="screen" />
</head>
<body>
<div id='wrapper'>
<div id="headerHolder">
</div>
<div id="bkgHolder">
<div id='content'>
some content here
</div>
</div>
</div>
<div id="footerHolder">
<p>All Content and Images, Copyright © Dunn & Tighe Interiors</p>
</div>
</body> </html>
Something like this work?
http://jsfiddle.net/SinisterSystems/8aLg3/1/
HTML:
<div id="bkgHolder"></div>
<div class="wrapper">
<div id="header">
<h1>I'm the Sticky Header</h1>
</div>
<div id='content'>
<p>Some content here</p>
</div>
</div>
<footer class="footer">
I'm the Sticky Footer.
</footer>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#header {
background:#CCC;
height:50px;
}
#bkgHolder {
background-image: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
width:100%;
height:100%;
position:absolute;
z-index:-10;
}
.wrapper {
min-height: 100%;
margin-bottom: -25px;
position:relative;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {
height: 25px;
}
.footer {
background:#6AF;
}
p {
color:#FFF;
}
EDIT:
You could always do something like this?
JS Fiddle: http://jsfiddle.net/SinisterSystems/8aLg3/6/
The last answer got convoluted. Let me identify what this does:
View Here: http://jsfiddle.net/SinisterSystems/8aLg3/9/
Static Header that will be at the top of your page
Static Footer that will remain on the bottom of your page
Implemented a jQuery function that will size and resize on window resizing your image to the current restrains without breaking aspect ratio.
BG Image will be inherently centered.
A javscript solution to this is not ideal, but is required for what you're asking to accomplish.
HTML:
<div id="bkgHolder"></div>
<div class="wrapper">
<div id="header">
<h1>I'm the Sticky Header</h1>
</div>
<div id='content'>
<p>Some content here</p>
</div>
</div>
<footer class="footer">
I'm the Sticky Footer.
</footer>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#header {
background:#CCC;
height:50px;
}
#bkgHolder {
background-image: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
background-repeat: no-repeat;
background-position: center;
background-size:contain;
width:100%;
height:100%;
position:absolute;
margin-top:50px;
z-index:-10;
}
.wrapper {
min-height: 100%;
margin-bottom: -25px;
position:relative;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {
height: 25px;
}
.footer {
background:#6AF;
}
p {
color:#FFF;
}
jQuery Script Addition:
$(function() {
var h = $(window).height();
var w = $(window).width();
$('#bkgHolder').css({
'width': w,
'max-height': h-75,
});
window.onresize = function(event) {
h = $(window).height();
w = $(window).width();
$('#bkgHolder').css({
'width': w,
'max-height': h-75,
});
}
});
View Here: http://jsfiddle.net/SinisterSystems/8aLg3/9/
Related
pretty new to web design and I thought it would be a good idea to create a basic mockup of a website with a header, a paragraph and a sticky footer just to ensure I've got some basics down :)
I'm wondering how to center the .paragraph div vertically as well as horizontally and also if there are any obvious problems or inefficiency with the code that I should be aware of. I just want to make sure I can code a basic layout without developing bad habits.
So I ended up with this css:
.head {
margin: auto;
height: 100%;
width: 100%;
background-color: #000;
color:white;
text-align:center;}
body {
background-color:#99C;
}
.h1 {
font-size:50px;
font-family:Georgia, "Times New Roman", Times, serif;
padding:30px;
}
.paragraph {
color:#FFF;
text-align:center;
background-color:#333;
width:35%;
margin:auto;
margin-top:165px;
padding:10px;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
/* equal to footer height */
margin-bottom: -70px;
}
.wrapper:after {
content: "";
display: block;
}
.site-footer, .wrapper:after {
/* .push must be the same height as footer */
height: 70px;
}
.site-footer {
background: orange;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
line-height:70px;
}
And here's how it looks:
Thanks in advance!!!
Adam H
what about when you need to change the header/footer height for some reason?
you'll need to alter more than one rule in your CSS to keep your layout as you want it.
Here's the same layout that you desire, without fixing any height, using pure CSS.
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>I'm in the header</p>
<p>my height is not fixed</p>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
<p>I'm in the footer</p>
<p>my height is not fixed</p>
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
<div>
<p>I'm in the content</p>
<p>I always span the rest of the page.</p>
<p>If my content is bigger than my available space, I will scroll</p>
<p>This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera using Pure CSS only</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Content
{
height: 100%;
overflow: auto;
text-align: center;
font-size: 0;
/*for demonstration only*/
background-color: #90adc1;
}
.Content:after
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Content > div
{
font-size: medium;
display: inline-block;
vertical-align: middle;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Notice: the only Downside in my approach, is that I have to construct the footer before the content (in the HTML).
I want to make a one Column Layout with 3 section
Section 1: Header
Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel
Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
thanks!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
2018 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
article {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="page">
<header>header content</header>
<article>main content</article>
<footer>footer content</footer>
</div>
No need to use tables! Some simple css will do nicely.
DEMO: http://jsbin.com/azivip/2/edit
Html Markup:
<body>
<div id="content">
<div id="header">
This is the header
</div>
<div id="inner">
This is the body
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
CSS:
body{
height:100%;
padding:0px;
margin:0px;
}
#content{
position:relative;
bottom:0px;
width:100%;
height:100%;
}
#header{
position:relative;
bottom:0px;
width:100%;
height:100px; /* Edit for height of header*/
background:#f00;
}
#inner{
width:100%;
text-align:center;
position: absolute;
top: 50%;
display: table-cell;
vertical-align: middle;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px; /* Edit for height of footer */
background:#0f0;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
<table> is what you need to use in this case. The HTML will look like this, basically:
<table class = "wrapper">
<tr><td class = "header">I'm the header.</td></tr>
<tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
<tr><td class = "footer">I'm the footer.</td></tr>
</table>
Example CSS:
html, body, .wrapper {
height: 100%;
}
.header {
height: 100px; /*This value can be anything*/
}
.content {
text-align: center;
}
.footer {
height: 100px;
}
Demo: jsFiddle.
Note how the content is centered both vertically and horizontally.
Hope that helped!
I seem to be having a problem with my footer growing to 100% width of the page. Currently when it expands there is a gap on each side of the footer. I tried putting the footer outside the the wrapper and inside and pretty much get the same results. I've attached my code to see if anyone can spot what im doing wrong.
<div id="wrapper"> <!--Begin Wrapper -->
<div id="riaandoviwrap">
<div id="riaandovi">Ria And Ovi</div>
</div>
<div id="slideshowwrap">
<div id="slideshow"><img src="images/DSC00495.JPG" /></div>
</div>
<div id="slideswrap">
<div id="slide1">SLIDE 1</div>
<div id="slide2">SLIDE 2</div>
<div id="slide3">SLIDE 3</div>
</div>
<hr />
<div id="contentwrap">
<div id="content"></div>
</div>
<div id="footerwrap">
<div id="footerleft">© 2012 Ria and Ovi</div>
<div id="footerright">Share this on:</div>
</div>
</div> <!--End Wrapper -->
body {
background: #f7f6f6;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#wrapper {
width: 100%
}
#riaandoviwrap {
width: 300px;
min-height: 150px;
}
#riaandovi {
font-family: Script;
font-size: 75px;
}
#slideshowwrap {
width: 950px;
background: url(../images/slider-bg2.png);
clear: both;
}
#slideshow {
min-height: 350px
}
#slideswrap {
width: 950px;
min-height: 100px;
background: #09F;
margin-top: 6px;
clear: both;
}
#slide1 {
width: 300px;
float: left;
}
#slide2 {
width: 300px;
float: left;
}
#slide3 {
width: 300px;
float: left;
}
#contentwrap {
}
#content {
}
#footerwrap {
min-height: 105px;
background: url(../images/footer-bg.png);
margin: 0px;
}
#footerleft {
width: 350px;
float: left;
}
#footerright {
width: 350px;
float: left;
}
hr {
max-width: 950px
}
img {
border: 5px solid #FFF
}
Set padding and margin to zero for the body tag. Althought you're not setting one manually, browsers do have a default padding/margin.
Include a reset sheet in your document to reset all of those default styles. Recommend Eric Meyer's since its more complete:
http://meyerweb.com/eric/tools/css/reset/
as you can tell by the title I want to have a footer stick to the bottom. I know that there are a lot of topics on that. I already read through them. But I can not get it to work, because of my navigation, which is fixed to the top.
The layout looks like this:
<header class="navbar navbar-fixed">
</header>
<div class="content">
<div class="container">
</div>
<div class="clearfooter"></div>
</div>
<footer>
</footer>
And here is the CSS:
html, body {
height: 100%;
}
body {
padding-top: 40px; /* height of the navbar */
}
.navbar-fixed {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
}
.content {
margin-bottom: -30px;
min-height: 100%;
position: relative;
}
.clearfooter {
clear: both;
height: 30px;
}
#footer {
height: 30px;
position: relative;
}
I tried this tutorial. But the footer is not pinned to the bottom of the window it is further down (not in the viewport anymore). I already tried to fix it with additional padding/margin but nothing worked :(
Instead of adding padding to the body to push your page just create a push div to add some space between your fixed header and your content, like so:
HTML
<div class="push"> </div>
CSS
.push { height:40px; }
.push:before, .push:after {
display: table;
content: "";
zoom: 1;
}
.push:after {
clear: both;
}
Here is a demo:
http://jsfiddle.net/andresilich/fVpp2/1/show/
Edit here http://jsfiddle.net/andresilich/fVpp2/1/
Note: Added a bunch of break lines to illustrate the positioning of the footer.
(edit: jsfiddle cut my CSS, added it back.)
I did an experiment and it worked, here is the html:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="contain">
</div>
<div class="footer">
</div>
</div>
</body>
and the css:
.header {
height: 100px;
background-color: red;
}
.contain {
height:1500px;
background-color: black;
}
.wrapper {
width: 960px;
background-color: yellow;
margin: 0 auto;
}
body {
margin: 0;
}
.footer {
height: 200px;
background-color: blue;
}
it has both header and footer fixed, I hope you get the clue out of it.
%19 Left Section Width, %80 Content width:
But i want to fix left section to 200px and content section is the rest of viewable area's width.
How can i do this with CSS?
<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div
{
border: 1px solid black;
}
#header
{
background: #0f0;
width: 100%;
}
#leftcol
{
background: #f00;
float: left;
width:19%;
/* max-width: 200px; */
height: 500px;
}
#content
{
background: #fff;
float: left;
width: 80%;
height: 500px;
}
#footer
{
background: #0f0;
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
Header Section</div>
<div id="leftcol">
Left Section</div>
<div id="content">
Content Section</div>
<div id="footer">
Footer Section</div>
</body>
</html>
There's plenty of ready made templates that would work here, take a look at these for example:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://bonrouge.com/2c-hf-fluid.php
Take a look: http://www.brunildo.org/test/lf100r.html