如何在两个垂直导航栏之间的页面底部定位 DIV答案

【问题标题】：How to position DIV at bottom of page between two vertical navigation bars如何在两个垂直导航栏之间的页面底部定位 DIV
【发布时间】：2011-01-11 14:14:41
【问题描述】：

我无法做两件事。我似乎总能完成一个，但不能完成另一个。我想让我的页脚始终出现在页面底部并占据内容容器的 100% 宽度。

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  border: none;
}
#wrapper {
  position: relative;
  width: 100%;
  min-width: 940px;
  min-height: 100%;
  height: 100%;
  border: 1px solid #ff0000;
}
#nav_open {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 125px;
  height: 100%;
  border: 1px solid #ff0000;
}
#content {
  top: 0px;
  margin-left: 126px;
  margin-right: 201px;
  min-height: 100%;
  height: 100%;
  border: 1px solid #ff0000;
}
#nav_closed {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 200px;
  height: 100%;
  border: 1px solid #ff0000;
}
#content_header {
  border: 1px solid #ff0000;
}
#content_body {
  border: 1px solid #ff0000;
}
#content_footer {
  height: 15px;
  background: #df781c;
  border: 1px solid #ff0000;
}

<div id="wrapper">
  <div id="nav_open">
    nav_open
  </div>

  <div id="content">
    <div id="content_header">
      content_header
    </div>

    <div id="content_body">
      content_body
    </div>

    <div id="content_footer">
      Footer
    </div>
  </div>

  <div id="nav_closed">
    nav_closed
  </div>
</div>

【问题讨论】：

标签： css footer

【解决方案1】：

.html:

<div id="wrapper">
 <div id="nav_open">
  nav_open
 </div>

 <div id="content">
  <div id="content_header">
   content_header
  </div>

  <div id="content_body">
   content_body
  </div>

 <div id="nav_closed">
  nav_closed
 </div>
</div>

  <div style="clear:both;">&nbsp;</div>
  <div id="content_footer">
   Footer
  </div>
 </div>

CSS：

html, body { margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
   border: none;
  }

#wrapper { position: relative; 
   width: 100%;
   min-width: 940px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;
  }

#nav_open { position: absolute;
   top: 0px;
     left: 0px;
   width: 125px;
   height: 100%;

   border: 1px solid #ff0000;
             }

#content { top: 0px;
   margin-left: 126px;
   margin-right: 201px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;   
  }

#nav_closed { position: absolute;
   top: 0px;
   right: 0px;
   width: 200px;
   height: 100%;

   border: 1px solid #ff0000;   
             }

#content_header { border: 1px solid #ff0000;
  }

#content_body { border: 1px solid #ff0000;
  }

#content_footer { height: 15px;

   background: #df781c;
   border: 1px solid #ff0000;
   text-align:center;
   line-height:15px;
  }

【讨论】：

感谢您的回复，但这似乎不起作用。它将页脚移到#content 容器之外。页脚需要留在#content div 和两个#navigation div 之间。请参阅proficients.com/www/ccpets.com 以了解页面应该是什么样子的示例。除了橙色条应位于屏幕底部。