I would like to know how I leave a <div> fixed at the bottom of the page, like I made it down with margin-top , but only in Firefox and one thing when I open Chrome a <div> is not in the footer.
Fix div at the bottom of the page
2
asked by anonymous 05.07.2015 / 19:21
4 answers
1
Finally a solution tested on the 3 main browsers ( Chrome , FireFox and Internet Explorer 8+ )
CSS
<style type="text/css">
html, body,#wrap {margin:0; padding:0; height:100%;}
#wrap {display:table;width:100%}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
.content { background:#ccc; }
header { background:#999; color:#fff; text-align:center; padding:10px 0}
header, .footer, main { display:block}/* ie7 and under*/
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique */
header, .footer{height:1px}
h1{padding:10px;margin:0;}
.footer {background:#999; color:#fff; text-align:center;}
.footer p { margin:0; padding:10px}
</style>
HTML
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--Ifyouaren'tusingjqueryyoucanusethebodyelementinstead(body{width:100%;display:table;height:100%})ofthe#wrapdivasjqueryhasabug(http://bugs.jquery.com/ticket/7261)inwebkitwhenthebodyisdisplay:table.--><divid="wrap">
<header><h1>Cabeçalho (Funciona no FF, IE 8+, Chrome)</h1></header>
<main class="content">
Conteúdo aqui
</main>
<footer class="footer"><p>Rodapé</p></footer>
</div>
Full
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Incluindo JS</title>
<style type="text/css">
html, body,#wrap {margin:0; padding:0; height:100%;}
#wrap {display:table;width:100%}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
.content { background:#ccc; }
header { background:#999; color:#fff; text-align:center; padding:10px 0}
header, .footer, main { display:block}/* ie7 and under*/
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique */
header, .footer{height:1px}
h1{padding:10px;margin:0;}
.footer {background:#999; color:#fff; text-align:center;}
.footer p { margin:0; padding:10px}
</style>
</head>
<body>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--Ifyouaren'tusingjqueryyoucanusethebodyelementinstead(body{width:100%;display:table;height:100%})ofthe#wrapdivasjqueryhasabug(http://bugs.jquery.com/ticket/7261)inwebkitwhenthebodyisdisplay:table.--><divid="wrap">
<header><h1>Cabeçalho (Funciona no FF, IE 8+, Chrome)</h1></header>
<main class="content">
Conteúdo aqui
</main>
<footer class="footer"><p>Rodapé</p></footer>
</div>
</body>
</html>
05.07.2015 / 20:22
0
People usually fix it using absolute positioning, like this:
.footer {
height: 60px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #eee;
}
05.07.2015 / 23:01
0
Use a combination of position:absolute in the element you want to set below.
footer {
padding-top: 10px;
padding-bottom: 10px;
background-color: #BBBDBF;
position: absolute;
bottom: 0;
margin-bottom: -40px;
width: 100%;
}
With position:relative in the body of the document:
body{
position:relative
}
08.07.2015 / 22:04
0
You can use the following code to fix on all browsers in the same way.
In this way using position: fixed; "
.footer {
margin: auto;
width: 100%;
bottom: 0;
position: fixed;
}
23.09.2015 / 22:46