on this page, i'm trying to get the footer (the newsletter signup form) to fall to the bottom of the page.
but #container is somehow bigger than the body and it's messing everything up. any ideas?
here is an image of the issue. the blue is the end of the tag. http://i.imgur.com/1Ww3C6R.png
body#page {
background-color: white;
background-image: none;
width: 100%;
height: 100%;
container {
width: 100%;
margin: 0 auto;
margin-left: 0px;
}
The problem is that your div.container is set to height:100%; It would be okay if it started at the top of the page, but it is offset by your header. You need to do following:
First of all, use border-box to keep all paddings within your elements' dimensions.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Now you need to create a wrapper for your content and put your footer right below it
<div class="wrapper">
<div id="drawer">...</div>
<div class="container">...</div>
</div>
<footer>...</footer>
And css:
.wrapper{
height: 100%;
width: 100%;
padding-bottom:50px; /* reserving bottom space for footer */ }
.container{
display: inline-block; /* don't force it to 100%, just make it flexible */
float:left; /* using float will spare you from extra white-space bug occuring in pages with elements having display:inline-block property */
clear:both;
width: 100%; }
footer {
width: 100%;
float:left;
clear: both;
height:50px;
margin-top:-50px; /*moving it into the padded bottom space of wrapper*/ }
There you go. Now your footer will stick to your bottom of the page unless your content is larger than 100% of the screens height. Then it will just go down respectively.
Related
I am working on a project in which there many web pages. Basically I created three div tags for each page:
Header
Body (content)
Foother
But problem is that, I declared the size of body div tag, which contains the main part of a page like form, any description etc.
According to my screen size, which is small, So I declared and absolute/fixed min-height: 450px.
But when I run this code on other computers, which have bigger screen size, then footer is misplaced (in middle of screen). So what should I do now to always keep footer at bottom of screen, dispite the size of screen?
Use position:absolute; on the footer. By default footer is positioned relative to the html element, but if you apply position:relative; to body then the body will become reference.
To position it in the very bottom even when there is not much content, Use height:100%; on body as well as html.
By position:absolute; you will position it at the bottom of the content of html. So it will not be visible when content is very long, you'd have to scroll down to see it. But if you want it to the bottom of the screen even when the content is long then use position:fixed;
Below is a working snippet.
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
body{
position:relative;
}
footer{
position:absolute;
height:50px;
background-color:red;
bottom:0;
left:0;
width:100%;
}
<footer>footer Here</footer>
Basically you've to use position of relative but you've to keep fluid layout without worrying about height so I have created the code below and the footer always lay below the main what ever the main content contains.
* {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
header,
main,
footer{
position: relative;
float: left;
width: 100%;
}
header {
background: black;
min-height: 10px;
}
main {
min-height: 450px;
background: gray;
}
footer {
background: black;
min-height: 10px;
}
<header></header>
<main></main>
<footer></footer>
I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.
I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html
However when I use the following, the footer is showing halfway my long page for some reason.
position: absolute; bottom:0
I have both short pages and long pages and I would like it to be at the bottom of both of them.
How can I keep the footer at the bottom on a long page as well?
Fiddle
I've created these Fiddles to show the problem and test the code.
Please post a working example with your solution.
Short page
Long page
My footer css:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
.content {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
/* --- Footer --- */
.footerbar { position: absolute;
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px; }
a.nav-footer:link,
a.nav-footer:visited { color: white !important; }
a.nav-footer:hover,
a.nav-footer:focus { color: black !important;
background-color: #E7E7E7 !important; }
I would suggest the "sticky footer" approach. See the following link:
http://css-tricks.com/snippets/css/sticky-footer/
Again, here's where flexboxes come with a clean hack: flex-grow.
First of all, let's see the code:
div#container {
/* The power of flexboxes! */
display: flex;
display: -webkit-flex;
flex-direction: column;
min-height: 100vh;
}
div#container div#content {
/* Key part: Eat the remaining space! */
flex-grow: 1;
}
div#container footer {
flex-basis: 100px;
}
/* Appearance, not important */
body {
margin: 0;
font-family: Fira Code;
}
#keyframes changeHeight {
0% {height: 30px}
10% {height: 30px}
50% {height: 400px}
60% {height: 400px}
100% {height: 30px}
}
div, footer {
color: white;
text-align: center;
}
div#content section {
background-color: blue;
animation: changeHeight 10s infinite linear;
}
footer {
background-color: indigo;
}
<div id="container">
<div id="content">
<!-- All other contents here -->
<section>Main content</section>
</div>
<footer>
Footer
<!-- Footer content -->
</footer>
</div>
If the content in #content cannot reach the footer, then flex-grow extends the element to fit the remaining space, as the #container has the minimum height of 100vh (i.e. the viewport height). Obviously, if the height of #content plus the footer exceeds the viewport height, #container will be scroll-able. This way, footer always remains at the very bottom.
The animation in the snippet, which belongs to a sample section inside #content, tries to show you the exact same thing: its height is changing between 30px and 400px (change it to a greater value if needed).
Also, for the sake of information, see the difference between flex-basis and height (or width).
Tip: In CSS3, if something does not work, take a look at flexboxes and grids. They often provide clean solutions.
Hope it helps.
Replace Height with overflow:auto; & give body a position
html,body {
position:relative; <!--Also give it a position -->
margin:0;
padding:0;
overflow:auto; <!-- HERE -->
}
Position the footer to be relative to body
/* --- Footer --- */
.footerbar {
position: relative; <!-- HERE -->
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px;
}
It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.
Short Page Edit
min-height:400px; <!-- Give this a real number like 400px
or whatever you want...dont leave it to 100% as -->
}
Now we have flex-box which is very straight forward.
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
Note: we must contain only two div inside the body. One for footer and another for rest items
There is an excellent footer tutorial here.
The demo page is here.
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
The footer is then given the following rules:
.footerbar {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us.
There were always surprises that required more hacks and more patches.
here is what we have settled for:
css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
color: #6f643a;
font-family: Arial;
font-size: 11pt;
}
form {
height: 100%;
}
body:
<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" >
contents goes here
</td>
</tr>
<tr>
<td valign="top" bgcolor="gray" align="center" style="padding:20px">
<font color="#FFFF00">copyright:Puppy</font>
footer goes here
</td>
</tr>
</table>
That is all you need.
- if you are using asp.net don't ignore form height.
html,body {
margin:0;
padding:0;
height:100%;
}
.content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
.footerbar {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
If IE7
<!--[if lt IE 7]>
<style type="text/css">
.content { height:100%; }
</style>
<![endif]-->
Putting "position" as "fixed" with the "bottom: 0" solved my problems. Now it is responsive, the footer appears correctly (and remains there even with scroll) on both bigger screens (pc, laptop) and smaller ones (smartphone).
.footerbar {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 0;
width: 100vw;
min-height: 3vh;
}
position:fixed;
bottom:0;
Add this on the footer if you want to make the footer on the bottom while scrolling.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.
In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.
I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.
How do I do this?
Here is the Fiddle
JS Fiddle
I am not sure why but in JSFiddle the bottom div is not extending height: 100%
here is the code:
HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
try to use something like this code
html:
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
css:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
You have a few options to achieve the layout you would like.
There are plenty of answers that address your problem from this similar question:
Make a div fill the height of the remaining screen space
However, here is my solution:
Just change your CSS a bit
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).
CSS allows you to do some basic math, so the following would help you:
Given that your header has a fixed height of 60px:
.left {
height: calc(100% - 60px);
}
Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.
Try this in your style sheet
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
I have two main div. One is #header for menu, and one is #container for the content. I want that #container to reach the bottom of the page, whether is filled with content or not.
The problem is that adding height:100%; to body, html and #container causes the additional white space and scrollbar, which i do not want when not necessary.
HTML:
<div id='header'></div>
<div id='container'></div>
CSS:
body{
margin:0;
}
body,html {height:100%;}
#header {
height:70px;
width:100%;
background-color:red;
}
#container {
width:600px;
background-color:gray;
height:100%;
margin:0 auto;
}
JSFIDDLE: http://jsfiddle.net/ymBnw/
If you play with the padding and the margin of the #container, and position the #header absolutely, you can achieve this. I'm not taking into consideration the width, which you can set as you like.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 70px;
background-color: red;
z-index: 10;
}
#container {
width: 600px;
height: 100%;
background-color: gray;
margin: -70px auto -70px auto;
padding-top: 70px;
}
#content
{
padding-top: 70px;
}
Working example: http://jsfiddle.net/ymBnw/15/
EDIT
I've made a mistake setting the padding, which needs to be (obviously) the double of the margin (140px instead of 70px). Code fixed.
EDIT 2
Not happy again. The previous edit made the scrollbars to come back. The new solution proposed adds a new div within the #container.
Yes it would do that. Because you've given the #container 100% height, that is relative to the body. So you've given the #container the same height as the body. On top of that, you've got the #header height. So your total content is now 100% + 70px (header).
The way around this would be to set no height on the #container and have the grey background colour on the body.
You could also try:
#container {
position: relative;
z-index: 0;
top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
#header {
position: relative;
z-index: 10; }
Or you could try:
#container {
margin-top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
I'm not a fan of the second method. You could also do this with absolute positioning and a 70px padding on the top of the container.
You could do a position:absolute on the container div.
Code:
#container {
width:600px;
background-color:gray;
margin:auto;
bottom:0;
top:70px;
position: absolute;
left:50%;
margin-left:-300px;
}
Demo
You should use min-height: 100% instead of height: 100% to fix the background-color issue.
Here is a working solution:
CSS
#header {
height:70px;
width:100%;
background-color:red;
position: relative;
z-index: 10;
}
#container {
width:600px;
background-color:gray;
min-height: 100%;
margin:0 auto;
margin-top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JSFiddle Demo #1
JSFiddle Demo #2
As an alternative solution, instead of box-sizing, you can use ::before pseudo-element as the following:
#container {
width:600px;
background-color:gray;
min-height: 100%;
margin:0 auto;
margin-top: -70px;
}
#container:before {
content: ' ';
display: block;
height: 70px;
}
JSFiddle Demo #3
You're specifying the height of the container to be 100% but you're then setting the header height to be 70px. This will ultimately lead to your full body being 100% of the browser window + 70px.
That's why you will be getting a scrollbar, because 100% + 70px results in overflow.
Edit:
As others have suggested, you could use an absolutely positioned header, with a padded container. You would obviously lose flow in this scenario though. When it comes to specifying heights in HTML, there are always trade-offs...
try this
#container {
width:100%;
background-color:gray;
height:100%;
margin:0 auto;
}
#header {
height:70px;
width:100%;
background-color:red;
position:absolute;
}
demo
Using the new flexbox layout, all you have to do is to add these CSS properties to the body.
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
This sets the layout to flexbox and specifies that the direct children of the body element should be aligned top to bottom. For a more thorough guide to flexbox, have a look at this tutorial. Note that the flexbox layout is currently a candidate recommendation and older browsers are not going to support it. Current Webkit based browsers still need the -webkit vendor prefix.
I have a container div with a floating left-hand navigation pane and a content pane to the right:
<div id="header"></div>
<div id="container">
<div id="leftnav"></div>
<div id="content"></div>
<div class="clearfix"></div>
</div>
<div id="footer"></div>
CSS:
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
margin-left: 200px;
background-color: green; /* so I can see it */
}
.clearfix { clear: both; }
The #container div stretches to the full height of the floating #leftnav div, but the contained #content div does not stretch to 100% of the height. I've read elsewhere that this is due to the parent #container not having a specified height (defaults to auto) and therefore the 100% is not based on that container; however, I can't specify the height because the left navigation pane height isn't constant.
How can I get the #content div to be 100% of the height of the #container div when the #container div's height is defined by the floating #leftnav?
This is similar to the 3 column liquid "holy grail" CSS layout that has been plaguing people for years (though has been solved in the past couple years, though many of the solutions required browser hacks or Javascript to function).
I'd highly suggest you not reinvent the wheel here as it is difficult to get CSS to perform exactly as you're describing. Here is a good resource for this layout and many other similar liquid layouts:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
The easy way would be to use JS to set the height of #content to the height of #leftnav. You can use faux columns on #container and make a slice/gif of the green background and repeat it vertically on #container along with the red however you have it but I'm not sure if it fits your needs.
try this CSS
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
background-color: green; /* so I can see it */
float:right;
}
.clearfix { clear: both; }
I would also suggest using a line break with a clear both rather than a div.