5

我的网页上有页脚的 CSS 问题。我用过这篇文章，但页脚和页面底部之间有空白区域。由于我的页面正文中没有内容，因此空白空间仍然存在，并且在不需要时还有一个额外的滚动条。我真的不知道它为什么会在那里。我已经清理了 CSS，所以没有任何不相关的代码。

HTML：

<!doctype html>
<html>
    <head>
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <title>My Page</title>
</head>

<body>
    <div id="container">
        <div id="header">
            <p>
                Header Content
            </p>
            <hr>
        </div>
<div id="body">
    Body Content
</div>
        <div id="footer"><p id="copy">Copyright 2013</p></div>
    </div>
</body>

和 CSS：

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

#copy {vertical-align: bottom;text-align:center;font-family:Century Schoolbook;color:#8B0B04;font-size:14px;}
#footer {bottom: 0;width:100%;position: absolute;height: 60px}
#container {min-height: 100%;position: relative}
#body {padding-bottom: 60px}

我的浏览器是 Firefox，但在 Chrome 中这也不起作用。如果您能给我任何反馈和帮助，我将非常高兴。谢谢！

编辑：我发布了一些错误的东西恕我直言。我将在第二天发布整个页面。再次感谢您的反馈。

4

2 回答 2

3

用于overflow:hidden移除滚动条的容器

#container {
min-height: 100%;
position: relative;
overflow: hidden;
}

和padding-bottom身体 div

#body{
  padding-bottom:20px;
}

演示，这是带有内容的演示

于 2013-04-14T20:01:00.963 回答
0

也许试试这个 css 而不是你在那里的：

html, body {
    height: 100%
}
body {
    margin: 0px;
    padding: 0px;
}
#copy {
    vertical-align: bottom;
    text-align:center;
    font-family:Century Schoolbook;
    color:#8B0B04;
    font-size:14px;
}
#footer {
    bottom: 0;
    width:100%;
    position: absolute;
}
#container {
    min-height: 100%;
    position: relative
}
于 2013-04-14T19:52:02.417 回答