There must be over a dozen posts with a similar title but none that I have found have been effectively able to do what I thought would be a simple thing which is allow multiple elements to have a height of 100%. Take the following code:
<html>
<head>
<style>
html, body, [role="main"] {height:100%; width:6in; overflow:hidden;}
[role="banner"] {position:fixed; top:0; left:0;}
.height {height:100%; width:100%}
</style>
</head>
<body>
<header role="banner">
<nav>
Section one
Section two
Section three
</nav>
</header>
<div role="main">
<section id="1" class="height">
</section>
<section id="2" class="height">
<header>
<h1>section title</h1>
</header>
<button>Navigate Articles</button>
<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>
<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>
</section>
<section id="3" class="height">
</section>
</div>
</body>
</html>
I want to be able to navigate without scrolling. Clicking on a link that takes you to a section and that section will fill 100% of the screen height.
When I used the above code I do not get the effect I am looking for. I was close at one point using fixed position on elements with the class "height". It worked on the first section, but the lower sections and the articles within the section two would overlap.
Achieving the functionality you've requested with CSS alone isn't practical. Since you're referring to showing and hiding content, you may need to implement a small amount of javascript to bind click actions to hide/show functions when the nav links are clicked.
I applied the following to your code:
jQuery:
//Hide all .height sections at first.
$('section.height').hide();
//Show them, when their respective link is clicked.
$('nav a').click(function() {
var $this = $(this);
section = $this.attr('href');
$(section).siblings('.height').hide();
$(section).show();
});
And updated your CSS;
html, body, [role="main"] {
height:100%;
overflow:hidden;
}
body {
position: relative; /*so .height is relative to body when absolutely positioned*/
}
[role="banner"] {
background: yellow;
position:fixed;
top:0;
left:0;
z-index: 999;
}
.height {
background: red;
height:100%;
width:100%;
position: absolute;
}
h1 {
margin-top: 30px; /* to prevent menu overlap. */
}
You can see the results here: http://jsfiddle.net/mUEYM/2/
The basic premise is setting the .height elements to be position: absolute;. This will allow them to expand to the exact height/width of the browser window, provided that html and body also have 100% width & height.
I applied a z-index value to the nav, to ensure that it sits above the .height sections when they are displayed.
Ok I finally got this to work with pure CSS. The problem was not moving from section to section but with controlling the child elements.
.parent { height: 100%; position: relative; overflow-y: hidden }
.child { min-height: 100%; }
For an explanation see this Soure
Related
Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I'd like the footer to be at the bottom of the window and the limited content body just gets stretched.
However, if the webpage is long and you have to scroll to see the footer (or all of it), then things should behave as normal.
What's the proper way to do this with CSS? Do I need Javascript/jQuery to make this happen?
I only care about IE9+ and modern versions of other browsers. The height of the footer can change from page to page too, so I'd like to not rely on the height.
Check out this site. He has a good tutorial on how to do this with css.
I copied his css just in case Matthew's site is taken down.
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
EDIT
Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. Here is an example using jquery.
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
Give this a try.
It is a copy of the styles that Github uses to keep it's footer at the bottom of a page. It is a little hacky, and requires you to know the height of your footer (which may not work for your use case)
Markup
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
CSS (well, scss)
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
The important things here seem to be:
Setting height: 100% on containing elements (esp html and body)
Knowing the height of your footer, and accounting for it with a "push" element
using the combination of min-height height: auto !important and height:100%
Hope that helps!
HTML
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>
</body>
CSS
body {
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Considering that all your footer is inside the <footer> html tag, this is an easy solution using jQuery.
JS:
$(document).ready(function(){
$('body').css('padding-bottom', $('footer').height()+'px');
});
CSS:
footer {
position:absolute;
bottom:0;
}
No it's very easy set a minimum for your body height.
like this:
min-height:500px;
then the min height is 500px.
use min-height property, though not entirely reliable as some older versions may not support it. Throw in some javascript if you dont mind.
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
I want to place a footer div at the bottom of the page. The problem is, I have a dynamic content, so I can not work with "position: fixed;".
The page looks something like this:
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. So the height of the page changes. The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. How can I realize this?
with dynamic content, you can always use this:
sticky-css-footers-the-flexible-way
always helps!! :)
==================================================================================
EDIT
see this demo
CSS
html, body, #container {
height: 100%;
margin:0;
padding:0;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:grey;
}
#content {
padding-bottom: 3em;
}
HTML
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!
Reference : Refer here
You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/
That's the solution you're looking for.
Yo can use this Structure:
position:absolute;
bottom:0;
width:100%;
height:150px;
and set
position:Relative
for its parent.
Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I'd like the footer to be at the bottom of the window and the limited content body just gets stretched.
However, if the webpage is long and you have to scroll to see the footer (or all of it), then things should behave as normal.
What's the proper way to do this with CSS? Do I need Javascript/jQuery to make this happen?
I only care about IE9+ and modern versions of other browsers. The height of the footer can change from page to page too, so I'd like to not rely on the height.
Check out this site. He has a good tutorial on how to do this with css.
I copied his css just in case Matthew's site is taken down.
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
EDIT
Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. Here is an example using jquery.
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
Give this a try.
It is a copy of the styles that Github uses to keep it's footer at the bottom of a page. It is a little hacky, and requires you to know the height of your footer (which may not work for your use case)
Markup
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
CSS (well, scss)
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
The important things here seem to be:
Setting height: 100% on containing elements (esp html and body)
Knowing the height of your footer, and accounting for it with a "push" element
using the combination of min-height height: auto !important and height:100%
Hope that helps!
HTML
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>
</body>
CSS
body {
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Considering that all your footer is inside the <footer> html tag, this is an easy solution using jQuery.
JS:
$(document).ready(function(){
$('body').css('padding-bottom', $('footer').height()+'px');
});
CSS:
footer {
position:absolute;
bottom:0;
}
No it's very easy set a minimum for your body height.
like this:
min-height:500px;
then the min height is 500px.
use min-height property, though not entirely reliable as some older versions may not support it. Throw in some javascript if you dont mind.
Problem
I'm using this implementation of a CSS sticky footer. It does:
html,body{
height:100%;
}
I use (would like to) use a repeating background, however, the height:100% causes this issue:
(image from another sticky footer question with unsatisfactory answers)
It's my understanding that the image gets sized to the size of the window at rendering, and thus never sizes past that.
Question
Is it possible to continue to use my existing choice of CSS sticky footer with a repeating background image rendered completely on long pages
OR
is there another option of CSS sticky footers which does support the repeating background?
For reference
<div id="wrap">
<div id="header">Header text</div>
<div id="main">
</div>
</div>
<div id="footer">Footer Text</div>
CSS
* {margin:0;padding:0;}
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;}
Simply add additional wrapper. At least I always do exactly that. And attach bg-image to div#no-footer, it will stretch to the bottom
html, body {
height:100%;
}
#wrap {
min-height:100%;
background-image:url(...) top left repeat-x;
}
#no-footer-pad {
padding-bottom:100px;
}
#footer {
height:100px;
margin-top:-100px;
}
html markup:
<html>
<head></head>
<body>
<div id="wrap">
<div id="no-footer-pad"></div>
</div>
<div id="footer"></div>
</body>
So you have almost this markup, you must simply add additional div (#no-footer-pad), so that your content would not overlap footer
Hey now used to position fixed for this sticky footer as like this
.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}