Fix div at the bottom of the page

Asked

Viewed 2,949 times

2

I wonder how I leave one <div> fixed at the bottom of the page, like I made her stay down with margin-top, but only that in the Firefox and one thing when I open in the Chrome to <div> is not in the footer.

javascript jquery css

  • Take a look at this answer I gave: http://answall.com/questions/72075/como-fixar-um-rodap%C3%A9-no-bottom-even-very-count%C3%Bado/72097#72097

  • I actually wanted you to do a little self-supporting. why when I open in firefox and one more thing when I open in Chrome it doesn’t get down on the screen

  • i want to see if I leave the div fixed at the bottom of the screen

  • What you want is a footnote that stays in the background (Sticky footer)?

  • Any answers solved your problem? Don’t forget to vote yes and choose the correct answer.

4 answers

1

You can use the following code to fix in all browsers the same way.

Thus using the "position: Fixed;"

.footer {
margin: auto;
width: 100%;
bottom: 0;
position: fixed;
}

1

Finally a solution tested in 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]-->
    <!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
    http://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->

    <div id="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>

Complete

<!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]-->
    <!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
    http://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->

    <div id="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

inserir a descrição da imagem aqui

0

Use a combination of position:absolute in the element you want to fix below.

footer {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #BBBDBF;
  position: absolute;
  bottom: 0;
  margin-bottom: -40px;
  width: 100%;
}

With a position:relative on the body of the document:

body{
    position:relative
}

0

usually the staff fix it using absolute positioning, this way:

.footer {
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #eee;
}

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.