Question

如何将页脚（页脚标记）粘贴到屏幕底部，但不粘在屏幕上？如果我在1080p显示器上，该网站没有滚动。当我尝试1366x768时，网站变得可滚动。我希望页脚比内容低100px，因为现在页脚位于内容之上。这是我的HTML结构：

<body>
    <div id="container">
        <div id="header"></div>
        <div id="body"></div>
        <footer></footer>
    </div>
</body>

所以我在容器中有一个标题，正文和页脚。我见过的所有指南/教程都会让页脚粘到屏幕上。如果它没有粘在屏幕上，它就不会粘到底部。每当我打开Chrome开发者工具栏/菜单时，页脚会重新开始拍摄，我想这是因为我的身体高度是100％？但我不确定。帮助赞赏！感谢。

Answer 1

非常简单：使html和body 100％高度，您的容器（必须在初始视口中的任何内容）。将容器放在相对位置，将页脚放在绝对位置，然后放下任何东西。

<强> Example on JSFiddle

<强>代码

<style type="text/css">
    html, body { height: 100%; }

    #container { position: relative; 
        /* updated to support footer push */
        min-height: 100%;
        padding-bottom: 60px; /* must be the same as footer height */
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    #below { height: 500px; } /* or no height, or whatever */

    footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>

<div id="container">
    <footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>

修改查看上面编辑过的代码; min-height代替height容器让它能够伸展，但至少与屏幕一样高。您还必须添加底部填充，与页脚一样高，以防止页脚重叠您的内容。并且还添加box-sizing: border-box，否则填充将加起来到高度，从而导致页脚被推到初始视口。

（历史记录，here is the original fiddle）

Answer 2

footer { position : absolute; bottom : 0px; }

位置：固定（当你想在屏幕上粘贴任何html元素并且在滚动期间不会移动）

位置：绝对（当它显示时，它将位于您指定的位置，但稍后的屏幕尺寸和滚动可以改变它的位置）

谢谢（抱歉英语不好）

：）

Answer 3

您可以在页面底部添加一些填充，然后使用vh测量值：

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#header{
height:10vh;
}
#container {
  background: red;
  position:relative;
}
#body {
  height: 70vh;
  background: gray;
  padding-bottom:20vh;
}
footer {
  position: absolute;
  bottom: 0;
  height: 20vh;
  width: 100%;
  background: blue;
}

<body>
  <div id="container">
    <div id="header">header</div>
    <div id="body">body</div>
    <footer>footer</footer>
  </div>
</body>

使页脚粘到底部但不是屏幕？

3 个答案: