Question

我的网页上有页脚的CSS问题。我已经使用了this article，但是我在页脚和页面底部之间有空的空间。由于我的页面正文中没有内容，因此空白空间仍然存在，并且在不需要时会有一个额外的滚动条。我真的不知道为什么会这样。我已经清理了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中这也不起作用。如果你能给我任何反馈和帮助，我会很高兴的。谢谢！

编辑：我发布了一些错误的imho。我会在第二天发布整个页面。再次感谢您的反馈。

Answer 1

使用overflow:hidden容器删除滚动条

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

和padding-bottom for body div

#body{
  padding-bottom:20px;
}

Demo此处为Demo，内容为

Answer 2

也许尝试这个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
}

如何删除页脚之间的空间

2 个答案: