css 使div粘贴到页面底部

brvekthn 于 2023-02-20 发布在其他

关注(0)|答案(4)|浏览(143)

所以我做了一个联系人页面，我希望页脚div是坚持在页面的底部，而不是联系人的形式后的权利。
但是如果我把所有的东西放在一个容器div与height:100%;和使页脚bottom:0;那么页面将是“太长”，你必须滚动，等等...
我的css到目前为止：

#footer{
    background-color:#fff;
    font:bold 14px;
    color:#1E88E5;
    width:100%;
    height:auto;
    padding:1%;
    border-top:1px solid #1E88E5;
}

页脚只是一个正常的全宽div与一些居中的文本atm。

css

来源：https://stackoverflow.com/questions/39099295/make-div-stick-to-bottom-of-page

4条答案

按热度按时间

p4tfgftt1#

您可能可以使用position: fixed来实现这一点。

.footer {
  position: fixed;
  bottom: 0;
}

这样，您将需要偏移页面的底部，因此建议将padding-bottom添加到.main，即页脚的高度。

.main {
  padding-bottom: 30px /*whatever the height of your footer is*/
}

赞(0）回复(0）举报 2023-02-20

zazmityj2#

Pritesh Gupta's solution对我来说非常好用：
我复制+粘贴代码，以防他们的网站宕机：
下面是HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
  </head>

  <body>
    <main>stuff</main>
    <footer>&copy; 2016</footer>
  </body>
</html>

下面是CSS：

body {
  margin: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

footer {
  height: 4rem;
}

我不知道它是否能在旧的浏览器中工作，但我自己并不担心。
这还取决于你知道页脚的高度，尽管值得指出的是，你不必像上面的代码那样手动设置高度，因为如果你知道内容有多少垂直填充和行高，你总是可以弄清楚它是什么。
希望这能有所帮助，我花了一上午的时间尝试网络上的每一个粘脚教程，然后偶然发现了这项技术，虽然other技术确实有效，但这只需要最小的努力。

赞(0）回复(0）举报 2023-02-20

sg24os4d3#

如果你需要粘性页脚，你可以使它与2解决方案。

- 解决方案1：**

超文本：

<div class="wrap">
    Content
</div>
<div class="footer">
    Sticky Footer
</div>

CSS：

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

示例：https://jsfiddle.net/ta1amejn/

- 解决方案2（具有表属性）：**

HTML：内容页脚
CSS：

body{
    display:table;
    width: 100%;
}

html, body{
    height:100%;
}

.main{
    height:100%;
    width:100%;
    padding-bottom:20px;
    background:#eee;
    display:table-row;
}

.footer{
    /*height:30px;*/
    line-height:30px;
    width:100%;
    background:#00f0ad;
    display:table-row;
}

示例：https://jsfiddle.net/zbtaoq1b/
如果要使用固定页脚，请使用此解决方案：

.footer{
    position: fixed;
    bottom: 0;
}

赞(0）回复(0）举报 2023-02-20

q8l4jmvw4#

使用display: flex可以很容易地做到这一点，而不必关心body或wrapper标签的高度。

**示例：**如果需要，请将main tag的高度更改为任意值，footer始终粘到底部（而不是position: fixed）。

https://codepen.io/tronghiep92/pen/dzwRrO

HTML标记

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

CSS解决方案

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

或者您可以：

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}

赞(0）回复(0）举报 2023-02-20

我来回答

css 使div粘贴到页面底部

4条答案

相关问题

热门标签

最新问答