如何刪除頁腳之間的空間

Question

我的網頁上的頁腳出現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瀏覽器中也不起作用。 如果您能給我任何反饋和幫助，我將非常高興。 謝謝！

編輯：我發布了錯誤的恕我直言。 我將在第二天發布整個頁面。 再次感謝您的反饋。

Answer 1

使用overflow:hidden作為刪除滾動條的容器

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

和身體padding-bottom

#body{
  padding-bottom:20px;
}

演示，這里是具有內容的演示

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 個解決方案

解決方案1
2 已采納 2013-04-14 20:01:00

解決方案2
0 2013-04-14 19:52:02

如何刪除頁腳之間的空間

問題描述

2 個解決方案

解決方案1 2 已采納 2013-04-14 20:01:00

解決方案2 0 2013-04-14 19:52:02

解決方案1
2 已采納 2013-04-14 20:01:00

解決方案2
0 2013-04-14 19:52:02