如何将页脚设置到页面底部？

Question

代码：

<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>

如何将页脚放在页面底部？我已经尝试过填充、底部和边距的试验，但到目前为止我还不是很成功。谁能告诉我如何将页脚放在页面底部？谢谢

Answer 1

您需要将 body 高度设置为 100%。目前正文仅涵盖您拥有的内容。没有为 body 元素设置明确的高度。

由于 body 需要计算父元素的 100%，因此将 html 高度也设置为 100%。

html,
body {
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Slide-Up Dialogue Box</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #container {
      min-height: 100%;
      position: relative;
    }
    #header {
      background: #ff0;
      padding: 10px;
    }
    #body {
      padding: 10px;
      padding-bottom: 60px;
    }
    #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      background: #6cf;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer">
      Who is Online?
    </div>
  </div>
</body>

</html>

Answer 2

先生，您可以做到这一点：

body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}

HERE MY CODE

Answer 3

如果您的目标是 "fix" 您的元素位于屏幕底部，请设置：

position: fixed;
bottom: 0;

附带说明一下，开始学习 HTML5 元素（如 "footer" 而不是对所有内容都使用 div 可能是个好主意。另请注意，id 是唯一的，样式最好应用在 mass/generically 中（请改用类）。

如何将页脚设置到页面底部？

How can i set the footer to the bottom of the page?

html

css

footer