Question

我正试图弄清楚为什么我为特定网站编写的代码不能正常工作的问题。

我页面的主体（下面链接中的白色区域）应该从导航到页脚，但只能在某些页面上进行。

无论高度如何，页脚都会自动放置在每个页面的底部（即位于400px高度页面的页面底部）。

我有可能错过一些非常基本的东西吗？

我已在以下网址发布了该网站开发版的链接：

www.contendertest.com

我遇到问题的网页是索引和“注册”链接。

Answer 1

这是因为如果你有一个大的观看区域，没有足够的内容可以填满它。如果您在具有较大窗口的显示器上查看，您可以看到它一直不是白色到页脚。

编辑：将行填充底部：100px添加到＃bodyContainer，将margin-top：-100px添加到#footer，它将起作用。

Answer 2

使用#wrapper为您的repeat-y div提供背景图片，即内容区域的宽度和颜色。

修改：同时居中背景图片！

Answer 3

试试这个。当然不像我的内联CSS那样。

<html>
<head>
    <title>DIV Test</title>
    <style>
        body {
            margin: 0;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #header {
            background: #0000FF;
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
        }

        #content {
            background: #FF0000;
            height: auto;
            width: 100%;
        }

        #footer {
            background: #00FF00;
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"><!-- header content here --></div>
        <div id="content"><!-- main content here --></div>
        <div id="footer"><!-- footer content here --></div>
    </div>
</body>

希望对你有帮助。

编辑：指出解决方案是什么。查看页眉和页脚CSS位置属性。那应该解决它。

Answer 4

style.css，第16行，删除高度：100％

现在

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  text-align:justify;
}

后

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-align:justify;
}

CSS主体不会延伸到页面？

4 个答案: