Question

我正试图让我的页面占据屏幕的100％，页脚需要始终位于页面底部。

当页面调整大小时，div应该会以正确的背景颜色展开。

我目前的错误是： - 页脚停留在屏幕底部而不是页面。 - div（菜单）大于div（内容） - div没有正确调整大小

这是我的代码：

Div结构

<div id="container"><br />
   <div id="header">CMS</div>

   <div id="menu"><?php include ('includes/menu.php');?></div>
   <div id="content">
      <?php include $include_page?>
   </div>

   <div id="footer">CMS</div>
</div>

CSS

body {
    height: 100%;
    color: #0b0b0b;
    background-color: #696060;
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, sans-serif;
    font-size: 12.5px;  
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    background-color: #f1f1f1;
    border-left: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
    height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background-color: #a31f00;
    color: #fcfcfc;
    text-align: center;
}
#menu {
    width: 210px;
    background-color: #e0e0e0;
    float: left;
    padding: 10px 10px 10px 10px;
    height: 100%;
}
#content {
    width: 750px;
    height: 100%;
    float: left;    
    padding: 10px 10px 10px 10px;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 1000px;
    height: 20px;
    background-color: #a31f00;
    color: #fcfcfc;
    text-align: center;
    font-size: 11px;
}

Answer 1

您可能正在考虑使用粘性页脚。当内容不足以将其推下时，粘性页脚会粘到页面底部，但是当内容开始溢出页面时，它就会随之出现。

要制作一个，你基本上想要在<div>标签中包装不是页脚的所有内容，如下所示：

<div id="wrap">
  <div id="header">
    ...
  </div>

  <div id="main">
    <!-- All you page content goes here -->
  </div>
</div>

<div id="footer">
  I am a footer.
</div>

现在，对于神奇的CSS：

html, body
{
  height: 100%;
}

#wrap
{
  min-height: 100%;
}

#main
{
  overflow: auto;
    padding-bottom: 150px; /* must be same height as the footer */
}  

#footer
{
  position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear: both;
} 

/* Opera Fix */
body:before
{
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;/
}

在您的HTML页面上，您将需要IE6及更早版本和IE8的这种条件样式（!IE7表示不是7，而是所有其他）：

<head>
  ...
  <!--[if !IE 7]>
  <style type="text/css">
    #wrap
    {
      display: table;
      height: 100%;
    }
  </style>
  <![endif]-->
  ...
</head>

Answer 2

我会尝试将内容div放在菜单div中。这样，菜单始终是其内容的高度，而内容div可以推送菜单 - 并且它的内容在适用的地方。移除高度100％。

为什么pos：页脚上的abs？你试过亲戚吗？

Answer 3

您可能需要阅读此内容，以便在页面底部对齐页脚，无论上述内容如何; http://www.zymic.com/tutorials/html/effective-footers/

高度页面 - Div结构

3 个答案: