HTML/CSS布局问题

我正在做一些家庭作业。我无法让页脚在页面底部正确对齐，无论我在每个页面中填充了多少内容……有人能给我一个指针吗？包装器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:

KG门






KG门可替代：

-弹簧

电缆

-开瓶器

-键盘

-发射机

-车库门

-节

将页脚类替换为

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

---

看看这个，它应该很有用：

此外，您可以尝试使用

minheight:100%在您的身体类中。
让我们创建！



我们将从一些清晰的标记开始：

<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>




要实现“粘性”页脚（粘在页面底部的页脚），请设置
height:100%在
和
元素上。这将防止元素垂直收缩到其内容的大小：

html, body { height:100% }




然后在
#pagebody
元素（主页容器）上设置
框大小的
框大小的
（这是css3，因此添加所需的供应商前缀），以及
最小高度的
最小高度的
100%
：

现在页面的主容器的最小高度为100%，页脚应该向下推到视口下方（因此您必须滚动才能看到它）




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




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

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




然后添加
位置：相对
到
标题
元素，使其不在
页面正文
下面：

header {
    position: relative;
}




我们完了！试着把书中的一些段落删掉。页脚仍然粘在页面底部！：）

我希望这是有帮助的

-丹尼尔
你能澄清一下你所说的“合适”是什么意思吗？html会有帮助的抱歉，我正在编辑html…没有正确获取所有格式。请检查以下内容：
#pagebody {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height:100%;
    padding: 20px;
    background: #00A67C;
}

#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 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height:100%;
    padding: 100px 20px 60px;
    margin: -80px 0 -40px;
    background: #00A67C;
}

header {
    position: relative;
}