CSS - Maintain page height - html

I am trying to keep header of the page at top and footer at the bottom. If the container grows, the footer should be pushed down.
I have following working code using calc(), but all browsers don't support it. So, I need alternative for this. Please note, I want CSS only solution.
Code:
header{
height:50px;
background:#CCC;
}
footer{
height:30px;
background:#333;
}
main{
height:auto;
min-height:calc(100% - 80px);
}
JsFiddle
Any help would be appreciated.
Thanks

Just set your main content to a min-height of 100%, with a negative margin the same height as your footer, for example (cribbed from http://ryanfait.com/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
color:#FFF;
}
.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;
}
<div class="wrapper">
<header>Header</header>
Main Content
<div class="push"></div>
</div>
<footer>Footer</footer>
http://jsfiddle.net/u6rsLv1j/2/

Try:
header{
position:fixed;
top:0;
left:0;
height:50px;
background:#CCC;
}
footer{
position:fixed;
bottom:0;
left:0;
height:30px;
background:#333;
}
main{
height:auto;
margin:50px 0 30px;
}
This way, your header and footer would always stay on the very top and the very bottom, just the content of your "main"-container seems to be scrollable. Not very sure about this is what you searched for...

Just set the position absolute to footer and the position relative to his parent as in code below.
Position fixed is not a good solution in this case because bottom:0 in position fixed means the bottom of the first screen, so it wont scroll with the page. Not mentioning it has serious problems f.ex. on mobile devices.
EDIT: Try to run below code snippet in new window, as the preview isn't rendered properly.
*{margin:0;padding:0;}
html,body{height:100%;width:100%; position:relative;}
header{height:50px;background:#CCC;}
footer{height:30px;width:100%;background:#333; position:absolute; bottom:0;}
/*main{height:auto;min-height:calc(100% - 80px);}*/
p{padding-top:5px;}
p:last-of-type{padding-bottom:5px;}
<header></header>
<main>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</main>
<footer></footer>

The key is to use min-height and position absolute within relative.
Here you go:
<html>
<head>
<style type="text/css">
html, body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.page-wrapper{
position:relative;
min-height:100%;
width:100%;
}
.header{
height:50px;
background:#CCC;
}
.footer{
background:#333;
height:30px;
position:absolute;
width:100%;
bottom:0;
}
.main{
}
</style>
</script>
</head>
<body>
<div class="page-wrapper">
<div class='header'>header</div>
<div class='main'>main</div>
<div class='footer'>footer</div>
</div>
</body>

here is total solution of your problem.
http://css-tricks.com/snippets/css/sticky-footer/

Related

hide content of page when scrolling under a fixed div position

i have a fixed div position which has a margin from top of page,when i scroll my page the content of my relative position div (which has page content) is visible under a fixed div ( i can see the scrolling content because my fixed div has margin from top of page). i have searched a lot in stack overflow and try every solutions like give padding to body and Html or give margin or padding to my relative positioned div but none of them work for me.and still the content is visible.I don't want to use java scripts and also don't want to use padding for body or Html.
i see these questions for example but don't work for me:
link1,link2 ,link3 and link4. my html code is look like:
<section class="all-result">
<div class="nav">
...
</div>
<div class="results">
.....
</div>
</section>
and css look like :
.all-result{
position:absolute;
background: #fff;
overflow-y: scroll;
overflow-x: hidden;
z-index: 4;
right: 0;
}
.nav{
position:fixed;
margin-top:40px;
z-index:1000;
}
.results{
width:100%;
height:100%;
position:relative;
}
Here i added an example,somewhat i think you looking for.
body{ overflow-y: scroll;}
.all-result
{
position:absolute;
width:100%;
height:3000px;
overflow: hidden;
z-index: 4;
background:#759A97;
}
.nav{
width:100%;
height:40px;
position:fixed;
margin-top:40px;
z-index:1000;
background:#B9B9B9;
}
.results
{
top:100px;
height:300px;
position:relative;
background:#9A8975;
}
<!DOCTYPE html>
<html>
<body>
<section class="all-result">
<div class="nav">
</div>
<div class="results">
Page Content
</div>
</section>
</body>
</html>

Is there a way to do 2 divs has the same height?

My CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
.wrapper{
width:80%;
height:100%;
min-height:auto
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background:red;
}
.wrapped-nav{
width:30%;
float:left;
background:green;
height:auto;
min-height:100%;
}
.wrapped-ent{
width:70%;
float:left;
background:blue;
height:auto;
min-height:100%;
}
My HTML
<body>
<div class="wrapper">
<div class="wrapped-nav">Nav
</div>
<div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
</div>
</body>
jsbin: http://jsbin.com/cefegifula/edit?html,css,output
When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?
create a class that has height and refactor your code so that both divs have it.
so instead of using 100% for both divs use vh, px, or em to your advantage.
I would write it so that you have something like this.
<div class="class1 heightfix">
</div>
<div class="class2 heightfix">
</div>
and then in your css write
.heightfix{
height: 70vh; // or px or whatever.
}
in other news never try to use <br/> in order to fix your spacing problems.

full height content with scrolling footer

I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}

Stick the footer to the bottom of the page when contents are dynamic

I have tow pages of html that contain a footer. I want to stick the footer to the bottom of the page in both pages. It works fine when the page does not have vertical scroll but when the content is a lot and page has scroll footer stands over my contents. Here is my page layout:
<body>
<div id="container">
<div id="header"> Header </div>
<div id="menu"> Menu </div>
<div id="content"> Content </div>
<div id="footer"> Footer </div>
</div>
</body>
and here is my css:
html, body
{
width:100%;
margin:0;
}
#header, #menu, #content, #footer
{
border:thin solid #000;
}
#content
{
width:70%;
margin: 0 auto;
height:100%;
}
#footer
{
position:absolute;
bottom:0;
width:100%;
background-color:#06F;
}
Change your CSS like;
#footer{
width:100%;
background-color:#06F;
}
Here is a working Live Demo.
and if you want the footer stick to the bottom, no matter the content is, try;
#footer{
width:100%;
background-color:#06F;
bottom:0;
position: fixed;
}
But define a height to your footer and add the same amount of padding-bottom to your content, otherwise some text may be hidden by footer
Here is a working Live Demo.
#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;}
body,html {height:100%}
by this way you will get your output
You can try this
#footer {
background-color: #0066FF;
width: 100%;
}

Content container to fit screensize?

If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).
I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.
Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.
Here is a part of my code:
HTML:
<body>
<div class="background"></div>
<div class="page">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
.page {
position:relative;
height:100%;
z-index:1;
}
.content {
position:relative;
width:850px;
height: 100%;
margin: 0 auto;
background: url(images/content.png) 0 0 repeat-y;
}
I think this what you need (the footer will be always sticked to the bottom)
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
.page {
min-height:100%;
position:relative;
}
.header {
background:#00ff0f;
padding:30px;
}
.content{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
.content {
height:100%; // IE HACK
}
HTML
<div class="page">
<div class="header">Header</div>
<div class="content">
Some Content Here...
</div>
<div class="footer">Footer</div>
</div>​
Tested in all major browsers.
DEMO.
​
What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.
http://ryanfait.com/sticky-footer/