让我们创建a sticky footer！

Question

我正在做一些功课。我无法在页面底部正确放置页脚，无论我填写每个页面多少......有人能给我一个指针吗？包装div的宽度和高度必须设置为预设。我希望页脚位于页面底部。应填充正文内容，页脚应位于页面底部。顶部应该是50px到身体的底部。

body
{
    background-color:           #ffffff;
}
.wrapper
{
    width:                          960px;
    height:                         700px;
    background-color:               #D3D1C2;
    margin-left:                    auto;
    margin-right:                   auto;   
    margin-top:                     20px;
}
.masthead
{
   height:                          150px;
   width:                           960px;
   background-color:                #000;
}

#nav-wrapper 
{
   width:                           960px;
   margin:                          0 auto;
   padding:                     20px 0;
   background:                      #3D3331;
}
 ul#nav 
 {
   font-family:                     Verdana;
   font-size:                       14px;
   list-style:                      none;
   margin:                          0 auto;
   padding:                     0;
   width:                           960px;
   overflow:                        auto;
  }
 ul#nav li 
   {
   display:                     inline;
   }
  ul#nav li a
  {
   text-decoration:             none;
   display:                         block;
   padding:                     5px 21px;
   background:                      #5F3222;
   color:                           #eee;
   float:                           left;
   text-align:                      center;
   border-top:                      2px solid #815444;
   border-right:                    2px solid #3d1000;
   border-bottom:                   2px solid #3d1000;
   border-left:                 2px solid #815444;
}
ul#nav li a:hover 
{
   background:                      #a37666;
   color:                           #000;
   border-top:                      2px solid #815444;
   border-right:                    2px solid #c59888;
   border-bottom:                   2px solid #c59888;
   border-left:                 2px solid #815444;
}
 .body
 {


 }
 .footer
  {
  clear:                            both;
  width:                            960px;
  height:                           50px;
  background:                       #000;
      margin-bottom:                    10px;
 }
 h1
 {
   text-align:                      center;
 }

HTML：

<html>
<head>
    <!--I am using TextWrangler to do my html css editing on my Mac-->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'      type='text/css'>
<title>
    KG Doors
</title>
</head>
<body>
    <div class="wrapper">  
    <div class="masthead">

    </div><!--end the masthead div -->
    <div id="nav-wrapper">
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div class="body">
    <br/>KG Doors offers replacement of:
    <br/>- Springs
    <br/>- Cables
    <br/>- Openers
    <br/>- Keypads
    <br/>- Transmitters
    <br/>- Garage Doors
    <br/>- Sections

</div><!--end the body div -->
<div class="footer">

</div><!--end the footer div -->
</div><!--end the wrapper div -->

</body>
</html>

Answer 1

将您的页脚类替换为，

.footer
  {
  clear:                            both;
  width:                            960px;
  height:                           50px;
  background:                       #000;
  margin-bottom:                    10px;
  position:                         absolute;
  bottom:                           0px;   
 }

Answer 2

检查一下，它应该是有用的：http://www.alistapart.com/articles/footers/

此外，您可以尝试在身体类中使用min-height:100%;。

Answer 3

让我们创建a sticky footer！

我们将从一些不错的干净标记开始：

<header>
    <h1>A beautiful header!</h1>
</header>

<section id="pagebody">
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
    <p>My long page body...</p>
</section>

<footer>
    <p>A beautiful footer!</p>
</footer>

...我们将在CSS中添加一些基础知识：

body, h1, footer p { margin: 0 }

header, footer {
    color: #333;
    vertical-align: middle;
}

header {
    height: 80px;
    padding-left: 20px;
    line-height: 80px;
    background: #d2006b;
}
footer {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #FFE700;
}

#pagebody {
    padding: 20px;
    background: #00A67C;
}

#pagebody p { margin: 160px 0 }

#pagebody p:first-child { margin-top: 0 }
#pagebody p:last-child { margin-bottom: 0 }

要获得“粘性”页脚（粘贴在页面底部的页脚），请在height:100%;和<html>元素上设置<body>。这样可以防止元素垂直缩小到其内容的大小：

html, body { height:100% }

然后在box-sizing元素上设置border-box min-height（这是css3以便添加所需的供应商前缀）和100% #pagebody （主页容器）：

#pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height:100%;
    padding: 20px;
    background: #00A67C;
}

现在页面的主容器的最小高度为100％，页脚应该在视口下方向下推（所以你必须滚动才能看到它）。

接下来，在#pagebody元素上，添加一个等于标题高度（80px）的顶部填充和一个等于页脚高度（40px）的底部填充：

#pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    padding: 100px 20px 60px; /* I already had a 20px padding so I just added 20px to 80px for the new top padding, and added 20px to 40px for the new bottom padding. */
    background: #00A67C;
}

接下来，在#pagebody元素上，添加一个等于header高度的负上边距，以及一个等于页脚高度的负底边距：

#pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height:100%;
    padding: 100px 20px 60px;
    margin: -80px 0 -40px;
    background: #00A67C;
}

然后将position:relative;添加到header元素，使#pagebody下面的不：

header {
    position: relative;
}

我们已经完成了！尝试取出the example中的一些段落。页脚仍然粘在页面底部！ :)
我希望这很有帮助！

-Daniel

HTML / CSS放置问题

3 个答案:

让我们创建a sticky footer！