I have a footer div that sits on the bottom with a min-height: 100% parent named #container. That's working great, but I'm trying to make the height: 100% for the div named #content and I can't seem to get it. Any ideas?
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
background: rgb(226,226,226);
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
height: 165px;
width: 70%;
margin-left: auto;
margin-right: auto;
background: rgb(142,0,0);
}
#content {
padding:10px;
padding-bottom:100px;
width:70%;
left: 15%;
height: 100%;
margin-left: auto;
margin-right: auto;
background: rgb(252,252,252);
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
width: 70%;
left: 15%;
background: #1e5799;
}
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Demo Fiddle
Add a new rule:
#header, #footer, #content{
box-sizing:border-box;
}
Then add the below to your rule for #content, also removing height:100%:
position:absolute;
bottom:100px; /* <--height of footer */
top:165px; /* <--height of header */
Related
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
change #footer to
position:fixed;
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
http://www.cssstickyfooter.com/
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/.
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.
Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
How i can make this: HEADER top 16px,
CONTENT dynamic 100% height,
FOOTER at end of page
If i give 100% to inner-wrap DIV, them after footer is white space.
Thx
You have too many heights going on:
Remove the min-height and max-height values from your selectors.
Remove the position: absolute; from your #wrap div.
I made an example for you here.
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
#footer{
position:fixed;
clear:both;
}