Fix div at the bottom of the page

2

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.

    
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>

JSFIDDLE

    
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