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

The code:

代码：

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

How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks

如何将页脚放在页面底部？我已经尝试过填充，底部和边缘，但到目前为止我还没有成功。有人能告诉我如何将页脚放在页面底部吗？谢谢

3 个解决方案

#1

you can do this one sir:

你可以这样做一个先生：

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

这是我的代码

#2

You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.

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

Since body needs to calculate 100% of the parent element, set html height to 100% as well.

由于body需要计算100％的父元素，因此将html height设置为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>

#3

If you aim to "fix" your element to the bottom of the screen, set:

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

position: fixed;
bottom: 0;

On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).

另外，对于你来说，开始学习像“页脚”这样的HTML5元素而不是为所有东西使用div可能是个好主意。另请注意，id是唯一的，并且样式最好应用于质量/一般（使用类代替）。

#1