HTML – 如何删除页脚之间的空格

2024年1月26日 268次阅读

我的网页上有页脚的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.我会在第二天发布整个页面.再次感谢您的反馈.

最佳答案 使用overflow：hidden for container来删除滚动条

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

和身体div的填充底部

#body{
  padding-bottom:20px;
}

Demo,这里是Demo的内容

点赞