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>
Related
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;
}
am making a website, and have a wrapper on the footer, i want the footer as sticky footer, but when i minimise the screen and make it smaller the footer overtakes the content and header.
#footerWrapper {
height: 177px;
bottom: 0;
position: absolute;
width: 100%;
}
This does what i want as it makes the footer go to the bottom of the page regardless of what size the screen is. however when i minimise the screen and move it up it stays absolute hence staying in that 1 page.
as i would want it to stay on the page rather than the footer being absolute.
any ideas.
I'm using this, and it works fine, on mobiles too ...
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
source:
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
demo:
http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/
I was able to keep the footer sticky and not overtake the header by using z-index. Just give the higher DIVs higher z-indexes.
#headWrapper {
padding-bottom: 0px;
position: relative;
}
#headWrapper {
z-index: 2;
height: 160px;
/* width: 960px; */
margin: 0 auto;
background: url(/images/PageImages/homeHeadBack.png) repeat-x;
}
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: absolute;
width: 100%;
bottom: 0;
z-index: 1;
}
Please note that #headWrapper needs to specify position:relative.
I think you may start from this. Worked on Chrome.
Try this
#footerWrapper{
position: fixed;
}
#contentWrapper{
margin-bottom: 177px; // height of the footer
}
Alright, I'm not positive but I think I understand what you're trying to accomplish
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: fixed;
width: 100%;
bottom: 0px;
}
#contentWrapper {
background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
min-height: 208px;
margin-bottom: 177px;
}
If that doesn't fix it than I don't understand what you're aiming for.
try this one.
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
for more information.
I want the footer is fixed at the end of the screen
I added to the <h:body style="display: block;"> there is no change ,i added to <div id="footer"> the attribute style="position: fixed" and there is no change.
the picture of the footer of my page is below
You may try this html code which will work. BUT it takes #footer out of the document flow. So that's why you will have to use width: 100%.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
html, body
{
min-height: 100%;
height: 100%;
}
#footer
{
position: absolute;
bottom: 0px;
/* width: 100%; */
}
</style>
</head>
<body>
<div id="footer">
this is a footer
</div>
</body>
</html>
So instead I would propose to use this html structure - which will remain document flow and provide you with a clean (html4) structure.
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
html, body
{
min-height: 100%;
height: 100%;
}
#header { height: 20%; }
#content { height: 70%; }
#footer { height: 10%; }
</style>
<div id="header"></div>
<div id="content"></div>
<div id="footer">
this is a footer
</div>
Please try using this code :
`#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}`
This should work fairly well in all browsers. Tell me if you have any further problems with this.
Try the following CSS rules:
#footer {
// Specify the fixed position for the footer
position: fixed;
// Position it at the bottom of the screen
left: 0px;
bottom: 0px;
// Make it span across 100% of the browser's width
width:100%;
}
Hope it helps!
Use this code :
HTML :
#conteneur {
height : 100%;
}
</style>
<body>
<div id="wrapper">
<div id="container">
Body
</div>
<div id="footer">
Footer
</div>
</div>
</body>
CSS :
html, body {
margin : 0;
padding : 0;
height : 100%;
}
#wrapper {
position : relative;
min-height : 100%;
background : green;
}
#container {
padding-bottom : 6em; /* padding-bottom = footer height */
}
#footer {
position : absolute;
width : 100%;
height : 6em;
bottom : 0; /* set footer at bottom */
left : 0; /* set footer at left */
background : red;
}
jsfiddle
I fixed the problem for you, you can check it at Fiddle
<body>
<div id="content">
<div id="text"></div>
</div>
<div id="footer"></div>
</body>
* {
margin: 0;
padding: 0;
}
html, body {height: 100%;}
#content {
position: relative;
min-height: 100%;
border:1px solid red;
}
* html #content {
height: 100%;
}
#text {
padding-bottom: 100px;
border:1px solid green;
}
#footer {
position: relative;
height: 80px;
margin-top: -80px;
border:2px solid black;
}
see Demo:
http://jsfiddle.net/4Znbx/
I have been searching for this on SO, but I just could not find something exactly similar.
What I am trying to achieve is to have a page, that is full in height and in width, but does have a fixed header. The content height needs to be the remaining area left, but that area needs to have a height of 100%, most of the html code found on SO is just using height: auto. Basically I want to do this so that I can style it: adding border etc. Here's the code so far:
<html>
<head>
<title>Test</title>
<style type="text/css">
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#header{
height:50px;
background:green;
width:100%;
}
#wrapper {
background:blue;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
#content {
margin: 10px;
background-color: black;
height: 100%;
width: 100%;
border: 3px dashed gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content"></div>
</div>
</body>
</html>
See: http://jsbin.com/agiyer
Note that if the content is too tall to fit inside #content, it will simply be hidden.
HTML:
<div id="header">header</div>
<div id="content">content</div>
CSS:
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: green
}
#content {
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
border: 3px dashed gray;
background: #ccc
}
<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;
}