I want to create an HTML page which:
Appears centred horizontally
Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.
My header is 100% of the page width, when I expect it to be 100% of its parent width.
The background appears at 100% of the window height, but it then scrolls up with the content.
I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.
Many thanks in advance,
James
Here's a demo of the issue
And here's the barebones HTML:
<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
height:100%;
}
body {
background: #666;
height: 100%;
margin: 0;
}
#container {
position: relative;
height:100%;
background: white;
width: 400px;
margin: 0 auto;
padding: 0 0;
}
#header {
position:fixed;
z-index:100;
background:#ffe;
/* width:760px; */
width:100%;
height:64px;
}
#content {
position: absolute;
left:20px;
width:360px;
height:360px;
margin:64px 0 0 0;
background:#efe;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Fixed header
</div>
<div id="content">
Scrollable content
</div>
</div>
</body>
</html>
All of these fixed positions are going to give you headaches.
About the widths: the box model is usually the problem. I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside:
/* Set box models to match across browsers. */
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
max-width:100%;
}
Then set your width on a container using padding, first the mobile width, then the screen width to override:
#container {
padding: 0px 10px;
}
#media only screen
and (min-width : 700px) {
#container {
padding: 0% 30%;
}
}
For a full layout, you can visit my site:
http://instancia.net/fluid-sticky-footer-layout/
I should probably add the mobile bit to that page. :)
Fix header
Change the header position fixed to position absolute
Fix content height
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
background:#efe;
}
#content {
padding: 64px 20px 0;
}
Live example with pos fixed
http://jsfiddle.net/qB4sD/1/
Related
I have a sticky footer that uses the flexbox technique which works perfectly fine and expands when the content fills the page.
I'm now trying to add a conditional, based on a particular user, fixed position bottom navbar. i've applied margin-bottom to the footer which is fine when the content fits within the page however when the content grows i cannot scroll the page to the bottom and view the full footer. It seems the bottom-margin is not applied to the footer when the content grows to fill the page. Any help would be appreciated, example code and Codepen below.
<html>
<head>
<style>
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 0 0 20px 0;
}
footer {
background: #42A5F5;
color: white;
margin-bottom: 25px;
height: 50px;
}
.conditionalNav {
position: fixed;
bottom:0;
left:0;
width:100%;
background:green;
color: white;
padding:5px;
hight:25px;
}
</style>
<meta charset="UTF-8">
<title>Sticky Footer with Flexbox</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
<p>some content</p></div>
<footer class="footer">
Footer
</footer>
<div class="conditionalNav">
Conditional bottom navbar
</div>
</body>
</html>
https://codepen.io/pinman/pen/eYBLYOR
Setting height: 100% on html and body (as opposed to min-height) prevents the document height from exceeding the viewport height, so your additional content is overflowing scrollable area.
You could remove body from the 100%, leaving it on html, or add overflow: auto to the html/body rule so that the body element can scroll (as opposed to scrolling the window).
Edit: removing 100% height from body allows the footer to move off the bottom of the window. Updated accordingly.
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
overflow: auto;
}
You also have a typo in your .conditionalNav rule:
hight:25px;
I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.
<div id="footer"></div>
I don't want to use
#footer
{
position:fixed;
bottom:0;
}
AKA Sticky Footer
Is this possible without jQuery?
any suggestions?
This Flexbox solution is neater and far easier to implement:
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Just ensure you wrap the necessary divs inside the body.
Update 2021 - CSS GRID
Here is a solution using CSS Grid, this is by far the best way to do it on 2021.
html, body {
margin: 0;
height: 100%;
}
body {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-areas: "main" "footer";
grid-template-rows: 1fr 80px;
}
main {
background-color: #F8BBD0;
grid-area: main;
}
footer {
background-color: #7E57C2;
grid-area: footer;
}
<body>
<main>The content</main>
<footer>Footer</footer>
</body>
Old Answer
There is another sticky footer by Ryan Fait that doesn't use position fixed:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
Here is a solution that does not require that the footer be placed outside of the main wrapper element, which is how most people structure their pages.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}
<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>
Explanation
The wrapper element will fill 100% of the viewport height. (You could also use 100vh for the wrapper if you don't want to set the height of the html and body elements.) The wrapper also has a bottom padding to create a placeholder for the footer to sit.
The footer is absolutely positioned to the bottom of the wrapper and sits in the placeholder created by the wrapper's bottom padding.
This means that when the page does not have scrollbars, the footer will be positioned at the very bottom. However, when there is enough content for scrollbars to appear, the footer will be pushed down below the content.
(The color and background-color CSS properties in the example are for decoration only, obviously. They are included so that when you run the code, you can clearly see the separated sections.)
Try Sticky Footer Solution by Steve Hatcher
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Another way to do this if you don't know the footer size is to use javascript and css
html, body{
height:100%;
height:100%;
}
#footer{
background-color: #292c2f !important;
position:absolute;bottom:0px;
}
and Javascript part
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
You can do this with another approach just easily by setting min-height on the tag before your footer tag.
.the-tag-before-footer{
min-height:30%;
}
I tried a lot of approaches, but results were different when page was totally fill or not. The simplest and efficient solution is to use flex.
html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}
<div class="content">
<h1>The GOAT Footer with Flexbox</h1>
<p>You can add content to test with a full page</p>
</div>
<footer class="footer">
The GOAT Footer
</footer>
Credits to CSS Trick
First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).
HTML:
<body>
<div class="wrapper">
<h1>Main Content</h1>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
Now, make sure you give your footer a height.
Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.
.wrapper {
min-height: calc(100vh - 50px);
}
footer {
height: 50px;
}
Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.
The problem is simple to solve for anyone using Bootstrap 4 or higher, just include this snippet on your website:
<script>
$(document).ready(function(){
if ($('body').height() < $(window).height()) {
$('footer').addClass('position-absolute bottom-0');
} else {
$('footer').addClass('position-static');
}
});
</script>
Here we check if the height of the BODY tag is less than the height of the browser window, if positive we place the footer at the bottom of the page and if negative we make the footer static and it will remain where it is. You don't need to change your current code, you just need to include this javascript in your page or package, remembering that to work the <body> tag must have position: relative, if you haven't changed the tag's "position" property in CSS <body>, you don't need to do anything as it is the default value.
Make sure to include the code after jquery, without jquery it won't work.
If you are not using the <footer> tag, you should change the $('footer') selector as appropriate.
I want 3 columns
here is the code I have
div id="boundaries">
<div id="fenceleft"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
<div id="fence"></div>
<div id="fenceright"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
</div>
and the CSS
#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
width:100%;
max-width: 1395px;
height:92px;
z-index: 15;
}
#fenceleft {
float:left;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
#fenceleft IMG {
-moz-transform: scaleX(-1); /* For Mozilla Firefox */
-o-transform: scaleX(-1); /* For Opera */
-webkit-transform: scaleX(-1); /* For Safari, Google chrome */
/* For IE */
filter: FlipH;
-ms-filter: "FlipH";
}
#fence {
float: left;
background: url(img/fence.png) repeat-x;
display: block;
height:82px;
}
#fenceright {
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
Inside the boundaries div I want fence left and fence right to contain a fixed width image which they do. I want the #fence div to fill the remaining space between the two divs the right image needs to be fixed to the right hand side of the page and the left, the left hand side. the remainder I would like to have a div.
NOTE this question is common but my problem unique. the problem is that the middle or '#fence' div has no content and just a background image. with this selected code nothing displays because it has no content to fill the width.
to sum up i want [52px div fixed left] [remaining width div] [52px div fixed right]
As I understand you need something like this:
html:
<div class="leftFence"></div>
<div class="center"></div>
<div class="rightFence"></div>
css:
.leftFence,
.rightFence {
position: fixed;
height: 100%;
width: 52px;
background: red;
top: 0;
}
.leftFence {
left: 0;
}
.rightFence {
right: 0;
}
.center {
margin: 0 52px;
height: 100px;
background: gray;
}
Demo
#fixwidth1{
width:52px;
}
#fixwidth2{
width:52px;
}
#dynamicwidth{
width:calc(100%-104px); //i.e 100% width of browser - sum of two fixed width
background:#114455;
}
change css for boundaries div to this:
#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
left:0;
right:0;
height:92px;
z-index: 15;
}
this will properly scale your entire content width to the screen resolution, nvr ever give width like width:1395px. since you made your boundaries container to be absolute, you can stretch it using its top,left,right bottom value (and also width and height);
now change your fenceleft css to this:
#fenceleft {
position: relative;
float:left;
left:0;
width:10%;
height:100%;
}
so now, for any resolution, your leftfence will always be at 0 left from the left border of its parent i.e. boundaries div. and give it a height in percentage, so that, whenever you need to adjust height, you just have to adjust the parents class, just one class.
change your fenceright css to this:
#fence {
position: relative;
height:100%;
width:80%;
float: left;
}
now notice: since you have placed float:left on the fenceleft div, fence will align next to itself i.e. 10% (width of fenceleft) away from the left border of boundaries(parent) div.
also, since it has been given a width of 80%, that means, 80%+10%(from left)=90% hence 100-90 = 10% i.e. 10% width is remaining to the right of fence div. in which you can place your fenceright
change your fenceright to this:
#fenceright {
position: relative;
left:90%;
width:10%;
height:100%;
border:Solid 1px #666666;
}
now all your divs are properly aligned, with no horizontal scroll, covering entire horizontal width of screen.
do not copy and paste these directly. organize your CSS accordingly, do the math. think about a range of resolutions and not just your screen.
read this. it shd help you out.
in the html the center div must be after the left and the right div.
<div id="boundaries">
<div id="fenceleft"><img src="" width="52" height="92" /></div>
<div id="fenceright"><img src="" width="52" height="92" /></div>
<div id="fence"></div>
</div>
in CSS margin: 0 auto let the center div fill the remainder， and width of the center div must be given.
#fence {
margin:0 auto;
background: url() repeat-x;
display: block;
height:92px;
width: 700px;
position:relative;
}
#fenceright {
position:relative;
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
hi, one example, see here. i hope this can help you.
I am trying to stretch the content area of the page to 100%. I have got a fixed header (50px height) and a sticky footer (95px height) and anything in between should use 100% height...However I can't get this to work. Here is my CSS
<div id="wrap">
<!-- fixed top navigation -->
<div id="main">
<!-- main content -->
</div>
</div>
<footer>
<!-- footer -->
</footer>
The CSS is like this
html, body {
height: 100%; /* needed for container min-height */
}
#wrap {min-height: 100%;}
#main {
position:relative; /* needed for footer positioning*/
overflow:auto;
padding-bottom: 95px; /* must be same height as the footer */
padding-top:50px;
min-height:100%;
}
footer {
position: relative;
margin-top: -95px; /* negative value of footer height */
height: 95px;
background-color:#ebebeb;
}
body {margin:0px;padding:0px;}
Any ideas how to do this?
if you've putted the footer relative ("sticky") meaning you want you website to scroll down with the content.
so you need do create another div ("block") -> in the HTML position the div between header and footer,
and give it a width of 100% and a height of auto; (meaning: the div will fill up verticaly with the amount of content putted in it.
you can make the footer like
footer{
position: absolute;
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0;
left: 0;
right: 0;
}
i have tried before a lot
try use javascript to set height 100%
or try to use frameset
UPDATE
this article for using css
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
but i am sure 90% that it may have a problems with different browsers but try it.
and this article for using jQuery
http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
and this for using frameset
http://www.echoecho.com/htmlframes08.htm
and
http://www.w3schools.com/html/html_frames.asp
Finally you will choose what is useful for your project
Good Luck
My Regards
The best and simple way is
html,body{
height:100%;
}
#wrap {
height: calc(100%-50px-95px);
}
.footer {
//your code here
height: 95px;
}
I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My css:
html, body{
margin:0;
padding:0;
width:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
width:100%;
}
#grid{
width:1140px;
margin:0px auto;
}
At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?
EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:
html, body{
margin:0;
padding:0;
min-width:1140px;
}
body{
background:url(../images/page-background.jpg) repeat-x top left !important;
height:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
padding-top:1px;
}
#grid-container2{
width:1140px;
margin:0px auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
and the html:
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
The problem is caused by your #grid having a width:1140px.
You need to set a min-width:1140px on the body.
This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
html, body{
margin:0;
padding:0;
min-width: 1140px; /* this is the important part*/
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
width:1140px;
margin:0px auto;
}
html, body{
width:100%;
}
This tells the html to be 100% wide. But 100% refers to the whole browser window width, so no more than that.
You may want to set a min width instead.
html, body{
min-width:100%;
}
So it will be 100% as a minimum, bot more if needed.
Remove the width:100%; declarations.
Block elements should take up the whole available width by default.