I need to make my web page height to fit the height of the screen size without scrolling.
HTML
<body>
<form id="form1" runat="server">
<div id="main">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
</body>
CSS
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}
A quick, non-elegant but working standalone solution with inline CSS and no jQuery requirements. AFAIK it works from IE9 too.
<body style="overflow:hidden; margin:0">
<form id="form1" runat="server">
<div id="main" style="background-color:red">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
<script language="javascript">
function autoResizeDiv()
{
document.getElementById('main').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
</script>
</body>
Fixed positioning will do what you need:
#main
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
As another guy described here, all you need to do is add
height: 100vh;
to the style of whatever you need to fill the screen
Don't give exact heights, but relative ones, adding up to 100%. For example:
#content {height: 80%;}
#footer {height: 20%;}
Add in
html, body {height: 100%;}
Try:
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}
(77% and 22% roughly preserves the proportions of content and footer and should not cause scrolling)
you can use css to set the body tag to these settings:
body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
using this, replace your class "home" with your own
(function ($) {
$(function(){"use strict";
$('.home').css({'height':($(window).height())+'px'});
$(window).resize(function(){
$('.home').css({'height':($(window).height())+'px'});
});
});
})(jQuery);
Make sure you override the original styling by adding important.
height: 100vh !important;
I've used a CSS solution that has proved flexible.
You need choose one element to be the one that is full height. It also needs to be a parent to every content block. This can be the <body> element or anywhere in the DOM.
Additionally, you must designate one child to grow to make up whatever space is needed to stretch to fill the screen.
.content-parent {
min-height: 100vh; /* Forces to always fill the screen vertically... */
min-height: -webkit-fill-available; /* ...except on mobile, when you want to stay within the chrome */
display: flex; /* Enable content to stretch... */
flex-direction: column; /* ...vertically */
}
.filler-child {
flex-grow: 1; /* Designates this element to stretch to fill */
}
Example HTML:
<html>
<head>...</head>
<body>
<div class="parent">
<div class="hero">...</div>
<div class="content filler-child">...</div>
<div class="footer">...</div>
</div>
</body>
</html>
Related
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.
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
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 have a header element and a content element:
#header
#content
I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.
It this possible without Javascript?
forget all the answers, this line of CSS worked for me in 2 seconds :
height:100vh;
1vh = 1% of browser screen height
source
For responsive layout scaling, you might want to use :
min-height: 100vh
[update november 2018]
As mentionned in the comments, using the min-height might avoid having issues on reponsive designs
[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units.
The other answers were the solutions back then -- vmax is still not supported in IE, so this might not be the best solution for all yet.
The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Actually the best approach is this:
html {
height:100%;
}
body {
min-height:100%;
}
This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.
Technical Solution - EDITED
Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on <body> for styling to work. The code above - we gave <html> and <body> a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that <body> is superior over <html> because <body> holds the min-height. This in turn, allows <body> to override <html> because <html> had height already earlier. In other words, we are tricking browser to "bump" <html> off the table, so we could style independently.
You can use vh on the min-height property.
min-height: 100vh;
You can do as follows, depending on how you are using the margins...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
The accepted solution will not actually work.
You will notice that the content div will be equal to the height of its parent, body.
So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.
With HTML5 you can do this:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
For me, the next worked well:
I wrapped the header and the content on a div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
I used this reference to fill the height with flexbox. The CSS goes like this:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
For more info about the flexbox technique, visit the reference
Please let me add my 5 cents here and offer a classical solution:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>
This will work in all browsers, no script, no flex. Open snippet in full page mode and resize browser: desired proportions are preserved even in fullscreen mode.
Note:
Elements with different background color can actually cover
each other. Here I used solid border to ensure that elements are placed
correctly.
idHeader.height and idContent.top are adjusted to include border,
and should have the same value if border is not used. Otherwise
elements will pull out of the viewport, since calculated width does
not include border, margin and/or padding.
left:0; right:0; can be replaced by width:100% for the same
reason, if no border used.
Testing in separate page (not as a snippet) does not require any
html/body adjustment.
In IE6 and earlier versions we must add padding-top and/or
padding-bottom attributes to #idOuter element.
To complete my answer, here is the footer layout:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
And here is the layout with both header and footer:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH
Be sure to also have the height of html and body set to 100%, too.
The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS:(adding background-color for visual effect only)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.
In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.
height: 100vh;
Unless you need to support IE 9 and below, I would use flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }
You also need to get body to fill the whole page
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
CSS PLaY | cross browser fixed header/footer/centered single column layout
CSS Frames, version 2: Example 2, specified width | 456 Berea Street
One important thing is that although this sounds easy, there's going to be quite a bit of ugly code going into your CSS file to get an effect like this. Unfortunately, it really is the only option.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
The best solution I found so far is setting a footer element at the bottom of the page and then evaluate the difference of the offset of the footer and the element we need to expand.
e.g.
The html file
<div id="contents"></div>
<div id="footer"></div>
The css file
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
The js file (using jquery)
var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
You might also like to update the height of the contents element on each window resize, so...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
Have you tried something like this?
CSS:
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.