<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;
}
Related
This is my code:
<style >
html,body {
height:100%;
margin:0;
background:red;
}
#main {
height:100%;
background:yellow;
}
h1 {
margin:0;
}
</style>
<body >
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
</body>
I want div main to cover the whole viewport without extending the screen further to the bottom. With the above code, a vertical scrollbar appears because we exceed the viewport height. How may I oblige #mainto stop exactly at the bottom of the viewport?
You could give a height to <h1> and based on it calculate the height of body.
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
height: calc(100% - 35px);
background: yellow;
}
h1 {
margin: 0;
height: 35px;
}
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
You may use flex to make this easy :
body {
display: flex;
flex-flow: column;
}
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
background: yellow;
}
h1 {
margin: 0;
}
<style>
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
height: 100%;
background: yellow;
/* overflow:auto; depends on behavior expected when too much content */
}
h1 {
margin: 0;
}
</style>
<body>
<div>
<h1>Header within a div of any height </h1>
</div>
<div id="main">
Adjust the height, should i scroll if too much content ? then add overflow:auto;
</div>
</body>
You can set .main to position: absolute;, then use bottom: 0; left: 0; right: 0; to stretch it to all sides.
html,body {
height:100%;
margin:0;
background:red;
}
#main {
position: absolute;
bottom: 0;
top: 30px;
right: 0;
left: 0;
background:yellow;
}
h1 {
margin:0;
}
https://jsfiddle.net/841f9z5b/
Using viewport units we can get the desired div cover
html,body {
height: 100vh;
margin:0;
background:red;
}
#main {
height: 80vh;
background:yellow;
}
h1 {
margin:0;
height:20vh;
}
http://codepen.io/nagasai/pen/zBqQLq
You can use CSS calc to set your div height dynamically.
This will work with IE9 and above (so pretty much covers all modern browsers)
<style >
html,body {
height:100%;
margin:0;
background:red;
}
#main {
height: calc(100% - 37px); /* Height of header subtracted*/
background:yellow;
}
h1 {
margin:0;
}
</style>
<body >
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
</body>
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; }
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}
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/
thanks for helping out. I have a site with a container div that I'd like to stretch to the bottom of the page. Using position: fixed I'm able to achieve this, but the footer text on the bottom is cutoff and you are unable to scroll down.
Using position: relative I'm able to scroll, but the container div does not stretch to the bottom of the page.
My code is as follows:
.container {
position: relative;
bottom: 0;
top: 0;
left: 50%;
margin-left: -480px;
width: 960px;
height: auto;
background-color: #1b1a1a;
}
.body {
width: 703px;
min-height: 340px;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
overflow: hidden;
}
<div class="container">
<div class="header"></div>
<div class="body">
content content content
</div>
<div class="footer"></div>
</div>
Is this what you are looking for?
http://jsfiddle.net/gespinha/jrsxN/7/
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
.container {
width:100%;
height:100%;
position: absolute;
background-color: #1b1a1a;
}
.body {
background-color: #f2f2f2;
padding: 20px 20px 120px;
}
.footer {
width:100%;
height:100px;
position:fixed;
bottom:0;
background:#f00;
}