Question

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

这是我尝试的基本代码：

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

on 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”之后，没有任何作用，除非我手动将身高设置为数字而不是100％，如1200px，然后页脚转到位置1200px，不知道为什么它没有我认识到100％，我也尝试过：

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

在页脚div之后

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

Answer 1

感谢您的回答，问题是我没有设置“min-height：1000px”（我的内容的近似px）现在工作正常。

Answer 2

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

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>

不能在页面底部粘贴页脚

2 个答案: