无法使页脚在页面底部粘滞

Question

我试图让我的页脚粘在页面底部（在页面内容的末尾，即使内容比屏幕大）我尝试了很多东西，也许有些东西与代码冲突，因为它看起来很简单。

这是我正在尝试的基本代码：

               <body>
                <div id="main">
                    - a lot of divs and content, pictures, etc -
                <div id="footer1">
                  - footer content -
                </div>
                </div>
                </body>

在 CSS 上：

             body
                {
              height:100%;
              position:relative;
                }

             #main
                {
              height:100%;
              position:absolute;
                }

             #footer1
                {
              position:absolute;
              width:100%;
              height:150px;
              bottom:0px;
              left:0px;
              background-color:#5B5B5B;
                }

请注意，我已经尝试删除 div “main”，也尝试使用：

                       <footer>

在body标签而不是div“footer1”之后，没有任何效果，除非我手动将body height设置为一个数字而不是100％，比如1200px，然后页脚转到1200px的位置，不知道为什么它没有'认不出100%，我也试过：

                     <div style="clear:both"></div>

在页脚 div 之后

另外，我不想要一个固定的屏幕页脚“位置：固定”

Answer 1

感谢您的回答，问题是我没有设置“最小高度：1000px）（我的内容的近似像素）现在它工作正常。

Answer 2

<body> 的高度为零，因为父标签 <html> 的高度未定义。如果您想让页脚在屏幕上定位为absolute 而不是fixed，请将父级的高度设置为100%。

html {
  height: 100%;
}
body {
  height: 100%;
  position: relative;
}
#main {
  height: 100%;
  position: absolute;
}

#footer1 {
  position: absolute;
  width: 100%;
  height: 150px;
  bottom: 0px;
  left: 0px;
  background-color: #5B5B5B;
}

<html>
  <body>
    <div id="main">
      - a lot of divs and content, pictures, etc -
      <div id="footer1">
        - footer content -
      </div>
    </div>
  </body>
</html>