0

我的 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; }

}

现在，我可以让页脚保持在网页底部的唯一方法是设置 top:-3998px （或者我最大窗口的高度）。显然，一旦网页上有足够的内容以将其扩展超过该高度，这将不起作用。如果我将位置设置为相对，它会出现在我整个网页的顶部，而当绝对定位时，它只会出现在可视窗口的底部。您可以查看网站http://www.edmuncovered.com以了解我的意思或查看其余代码。我网站的部分内容包括每天左右添加内容，因此我想确保网页可以随着添加的内容而增加高度，但格式保持不变并且页脚显然保持在底部。有任何想法吗？

4

5 回答 5

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

于 2013-06-04T16:29:50.187 回答
0

我将假设这是一个与此处类似的问题：如何在 Content DIV 处停止 Sticky Footer

其中有一些很好的答案。

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

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

狩猎愉快。

于 2013-06-04T18:00:13.833 回答
0

这对我有用： 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>
于 2013-06-07T07:14:31.713 回答
0

这是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%;
}
于 2013-06-05T07:19:37.390 回答
0

你可以尝试这样的事情：

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/

于 2013-06-04T16:53:58.530 回答