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 {
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 2

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

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

＆＃13;

html,
body {
  height: 100%;
}

＆＃13;

<!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>

＆＃13;

Answer 3

如果您的目标是将元素“修复”到屏幕底部，请设置：

position: fixed;
bottom: 0;

另一方面，您可能最好开始学习像“页脚”这样的HTML5元素，而不是使用div作为一切。另请注意，id是唯一的，样式最好以质量/通用方式应用（而不是使用类）。

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

3 个答案: