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/
Related
When I create the new page & set background-color: black, it is coming according to content, not on the whole window.
I don't want to put that property into HTML.
I mean size of the body is generating according to content.
How can I fix that?
I can't put position: fixed in the body because sometimes I have to scroll on other pages & also I have footer stick to the bottom.
This is HTML:
<html>
<head>
</head>
<body ng-cloak>
<notifications-bar class="notifications"></notifications-bar>
<div ng-controller="MainCtrl as main">
<ng-include src="'app/layout/header.html'"></ng-include>
<div ng-view></div>
</div>
<footer class="footer_body">
<ng-include src="'app/layout/footer.html'"></ng-include>
</footer>
<spinner></spinner>
</body>
</html>
This is CSS:
html, body {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body
{
min-height: 100% !important;
margin-bottom:60px;
}
.footer_body {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0px;
height: 60px; /* height of footer */
background-color: #666666;
}
Update you CSS property html body background color like this
html, body {
background-color:#aadb1e;
}
Have you tried to set a background-color to .html in your css file ?
html, body {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body
{
min-height: 100% !important;
margin-bottom:60px;
}
.special-bg{
background-color: cyan;
}
.footer_body {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0px;
height: 60px; /* height of footer */
background-color: #666666;
}
<html class='special-bg'>
<body>
<notifications-bar class="notifications"></notifications-bar>
<div ng-controller="MainCtrl as main">
<ng-include src="'app/layout/header.html'"></ng-include>
<div ng-view></div>
</div>
<footer class="footer_body">
<ng-include src="'app/layout/footer.html'"></ng-include>
</footer>
<spinner></spinner>
</body>
</html>
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>
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I have a site with a google map canvas on it. It has a header, a footer, and a side panel on each side, a container div and a map canvas div.
The container div contains the side panels and the map-canvas div. My problem is that I cannot get the container div and all divs it contains to stretch to the contents of the browser window vertically.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
</div>
<footer id="footer"></footer>
</body>
</html>
CSS
#container{ height: 100% auto;min-height:500px; width:100% auto;z-index:2;overflow:auto;}
#map-canvas { width:100% auto; height: 100% auto; min-height:500px; margin: 0px; z-index:3;padding: 0px; font-family: NotoSans, Helvetica, Arial; }
#panel { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:left; }
#panel2 { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:right; }
#header { background-color: #F0F0F0 ; width:100%; min-width:1000px; z-index:3;height:100px;}
#footer { background-color: #F0F0F0 ; width:100%; z-index:4;min-width:1000px;height:100px;}
html, body{ height:100%;width:100%; margin: 0px; z-index:2;padding: 10px; font-family: NotoSans, Helvetica, Arial; }
I'm not sure what you want, but this should work quite well, I think.
But be sure you also set media queries for width and height to keep the page responsive when visited on smaller screen (eg. phone).
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
}
#header, #footer {
position: absolute;
width: 100%;
height: 100px;
background-color: #F0F0F0;
}
#header {top: 0;}
#footer {bottom: 0;}
#container {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#panel, #panel2 {
background-color: #CCC;
width: 200px;
min-height: 500px;
float: left;
}
#panel2 {
float: right;
}
#map-canvas {
min-height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
<div style="clear:both"></div>
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
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.