Question

这是我的html页面。

<!DOCTYPE HTML>
    <head>
        <style>
            #foot {
               position:absolute;
               bottom:0;
               width:100%;
               height:60px;   /* Height of the footer */
               background:#6cf;
            }

            .container{
                border: 1px solid RGB(100,100,100);
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 5px;
                height: 940px;
                width: 1200px;
                background: white;
                box-shadow: 0px 0px 5px;
                position: absolute;
                margin-left: 25px;
                margin-right: 20px;
                margin-top: 80px;
            }
        </style>
    </head>
    <body>
        <h1>My Page</h1>
        <div class="container">
        </div>
        <footer id="foot">
            My footer
        </footer>
    </body>
</html>

但是这会将页脚保持在页面之间。有人可以帮助我吗？

Answer 1

您想要使用

position:fixed;

用于#foot

http://jsfiddle.net/q3U4R/

可能是更好的方式：

http://jsfiddle.net/q3U4R/1/

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

. container { padding-bottom: 150px; }  /* must be same height as the footer */

#foot { 
    position: fixed;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    background:#ff0;
    bottom:0px;
    width:100%;
}

Answer 2

<!DOCTYPE HTML>
<head>
  <style>
    #foot {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px;   /* Height of the footer */
      background:#6cf;
    }

    #overlay {
      Z-INDEX: 9999; 
      POSITION: fixed; 
      TEXT-ALIGN: center; 
      WIDTH: 100%; BOTTOM: 0px; 
      HEIGHT: 80px; 
      _position: absolute
    }

    .container{
      border: 1px solid RGB(100,100,100);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 5px;
      height: 940px;
      width: 1200px;
      background: white;
      box-shadow: 0px 0px 5px;
      position: absolute;
      margin-left: 25px;
      margin-right: 20px;
      margin-top: 80px;
    }
  </style>
</head>
<body>
  <h1>My Page</h1>
  <div class="container">
  </div>
  <div id="overlay">
    <footer id="foot">
    My footer
    </footer>
  </div>
</body>
</html></footer></div></h1></body></style></head>

Answer 3

我认为这就是你要找的东西。按下我的示例中的按钮，无论您放入体内多少内容，都可以看到页脚如何贴在底部。希望这可以帮助你＆lt; 3

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap");
});

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
  
  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>
  
  <button id="add">Add Content</button>  
     
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

如何将页脚保持在页面底部？

3 个答案: