页脚CSS问题_Css - Fatal编程技术网

页脚CSS问题

css

页脚CSS问题,css,Css,我已将css文件中的页脚定义为： #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: 18px; } 现在，如果页面中添加了更多数据，它将移动到页脚下方，页脚将保持在原来的位置。有办法解决这个问题吗谢谢。使用位置：固定；为此。使用位置：固定；为此。不要对页

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

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

现在，如果页面中添加了更多数据，它将移动到页脚下方，页脚将保持在原来的位置。有办法解决这个问题吗

谢谢。

使用位置：固定；为此。

不要对页脚使用绝对定位，将它们绑定到视口（这就是

bottom:0px

所做的）

如果希望页脚位于视口底部或内容底部（以较长者为准），请使用。

不要对页脚使用绝对定位，将它们绑定到视口（这就是

底部：0px

所做的）

如果希望在视口底部或内容底部（以较长者为准）有一个页脚，请使用。

为什么有两个高度定义？另一种方法是设置

minheight

，这样它的高度可以随着内容“增长”，而不会小于特定高度

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

为什么你对高度有两个定义？另一种方法是设置

minheight

，这样它的高度可以随着内容“增长”，而不会小于特定高度

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

如果您正在寻找纯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>

当然，我会以奇怪的方式设置颜色和位置，以显示div在哪里相遇。当您向页面添加内容时，请将其添加到内容区域，因为我们有

溢出：auto

对于content div，它将滚动，并且您的页眉/页脚将是静态的

希望这有帮助

如果您正在寻找纯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>

当然，我会以奇怪的方式设置颜色和位置，以显示div在哪里相遇。当您向页面添加内容时，请将其添加到内容区域，因为我们有

溢出：auto

对于content div，它将滚动，并且您的页眉/页脚将是静态的

希望这有帮助

这是修复它的最简单方法，但IE6不支持它，不幸的是……请看一看。当然，你有权不同意他们写的东西，但我也觉得IE很恶心，不支持它。这是最简单的修复方法，但IE6不支持它，不幸的是……看一看。当然，你有权不同意他们写的东西，但我也觉得IE很恶心，不支持它。