Question

我的HTML看起来如下，没有内容，但因为只需要回答我的问题：

<html> 
  <body>
   <div class="container">
      <div class="socialmedia"></div>
      <div class="navbar"></div>
      <div class="mainbody></div>
      <div class="footer"></div>
   </div>
  </body>
</html>

我一直试图让我的页脚留在我的网页底部，在.mainbody下面。但问题是，页脚似乎只位于窗口的底部，而不是位于网页的底部，当我有大量内容时，它可能会远远低于我的实际窗口。现在，我将上面所有的div设置为“绝对”;以及html和body按以下方式设置样式：

html, body{
height:100%;
margin:0;
padding:0;
}
html {  background: url(/img/multiblock.png)repeat center center fixed; }

}

现在，我可以让我的页脚保留在网页底部的唯一方法是设置顶部：-3998px（或者我最大窗口的高度）。显然，一旦网页上有足够的内容将其扩展到该高度，这将无效。如果我将位置设置为相对位置，它将显示在我的整个网页的顶部，当它位于绝对位置时，它仅显示在可查看窗口的底部。您可以访问http://www.edmuncovered.com网站查看我的意思或查看其余代码。我的网站的部分内容包括每天添加内容，所以我想确保网页可以增加内容，但格式保持不变，页脚显然保持在底部。有什么想法吗？

Answer 1

我想这就是你需要的......

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Answer 2

您可以尝试这样的事情：

CSS：

.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px; 
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}

HTML：

<div class="container">
    <div class="socialmedia">Social Media</div>
    <div class="navbar">Navbar</div>
    <div class="mainbody">Mainbody</div>
    <div class="footer">Footer</div>
</div>

工作jsFiddle： http://jsfiddle.net/LrfXr/

Answer 3

我将假设这是一个与此处类似的问题：How to Stop Sticky Footer at Content DIV

有几个好的答案。

该页面上的链接：
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html

基本上，您正在寻找一个将自身附加到视口底部的页脚，但如果内容将其从视口中移开，也会延伸。 Martin Bean和Ryan Fait拥有最好的方法。 bootstrap的方法也是这种方法的变体。

快乐狩猎。

Answer 4

以下是jsFiddle链接。以下是你的css和html代码：

HTML代码

<div class="container">
      <div class="socialmedia">Social Media</div>
      <div class="navbar">Navbar</div>
    <div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
      <div class="footer">Footer</div>
   </div>

<强> CSS

*{
margin:0;
padding:0;
}
body {  
    background-color:#E4E2E2; 
    color:#fff;
}
.container {
   min-height:100%;
   /*position:relative;*/
}
.socialmedia {
    background-color:#186301;
    padding:10px;
}
.navbar {
   background:#A60206;
   padding:10px;
   min-height:30px;
}
.mainbody {
   padding:20px;
   background-color:#6D0594;
}
.footer {
   position:absolute;
   bottom:0;
   padding:2%;
   background-color:#000;
   width:96%;
}

Answer 5

这对我有用： http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

简而言之，请使用：

<强> CSS

* {
   margin: 0;
}
   html, body {
   height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

<强> 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) 2008</p>
        </div>
    </body> </html>

试图让.footer保持在网页的最底层

5 个答案: