Question

我已在css文件中将我的页脚定义为：

#footer {
  position: absolute;
  height: 50px;
  text-align: center;
  background: #66CCCC;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 18px;
}

现在，如果页面中添加了更多数据，它将移动到页脚下方，页脚将保持原样。有什么方法可以解决这个问题吗？

谢谢。

Answer 1

不要对页脚使用绝对定位，将它们绑定到视口（这是bottom: 0px的作用）。

如果您想在视口底部或内容底部（以较长者为准）中使用页脚，请使用sticky footers。

Answer 2

使用位置：固定;对此。

Answer 3

为什么你有2个高度定义？另一种方法是设置min-height，使其高度随着内容“增长”而不会低于某个高度。

#footer {
  .....
  min-height: 18px;
}

Answer 4

如果您正在寻找纯CSS，您可以执行以下操作：

HTML文件：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="Site.css" runat="server" rev="Stylesheet" type="text/css" />
</head>
<body>
    <div id="Page">
        <div id="Header">
            This is my "Header Content"!
        </div>
        <div id="Content">
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
        </div>
        <div id="footer">
            This is my "Footer Content"!
        </div>      
    </div>
</body>
</html>

CSS（Site.css）：

#Page
{
    background-color: Red;
}

#Header
{
    background-color: Purple;
    color: White;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 75px;
    font-size: xx-large;    
    text-align: center;
}

#Content
{
    background-color: Lime;
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
    bottom: 50px;
    overflow: auto;
}

#footer
{
    position: absolute;
    text-align: center;
    background: #66CCCC;
    height: 50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

我当然以奇怪的方式设置颜色和位置以显示div遇到的位置。当您向页面添加内容时，将其添加到内容区域，因为我们有内容div的overflow: auto;，它将滚动，页眉/页脚将是静态的。

希望这有帮助！

页脚的CSS问题

4 个答案: