css 如何将页脚(div)与页面底部对齐？[duplicate]

j2qf4p5b 于 2022-12-24 发布在其他

关注(0)|答案(7)|浏览(166)

- 此问题在此处已有答案**：

（32个答案）
八年前就关门了。
有人能解释一下如何将页脚div对齐到页面底部吗？从我看到的例子来看，它们都展示了如何使div保持在底部可见，无论你在哪里滚动页面。尽管我不希望这样。我希望它固定在页面底部，所以它不会移动。感谢帮助!

css

来源：https://stackoverflow.com/questions/3525581/how-to-align-footer-div-to-the-bottom-of-the-page

7条答案

按热度按时间

r6hnlfcb1#

- 更新**

我原来的答案是很久以前的，联系断了;更新它以便它继续有用。
我将内联更新的解决方案，以及JSFiddle上的工作示例。我依赖于CSS重置，虽然我没有包括那些样式内联。

- 解决方案1-利润抵消**

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

- 超文本标记语言**

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

- 中央支助组**

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer's total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

- 解决方案2-弹性盒**

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

- 超文本标记语言**

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

- 中央支助组**

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

以下链接提供了更详细的解释和不同的方法：

你是这个意思吗？
http://ryanfait.com/sticky-footer/
这个方法只使用了15行CSS，几乎没有任何HTML标记。更棒的是，它是完全有效的CSS，可以在所有主流浏览器中使用。Internet Explorer 5及以上版本、Firefox、Safari、Opera等等。
此页脚将永久保留在页面底部。这意味着如果内容超过浏览器窗口的高度，您将需要向下滚动才能看到页脚...但如果内容小于浏览器窗口的高度，页脚将粘在浏览器窗口的底部，而不是在页面中间向上浮动。
如果您需要实施方面的帮助，请告诉我。

赞(0）回复(0）举报 2022-12-24

oaxa6hgo2#

这将使div固定在页面的底部，但如果页面很长，它将只在你向下滚动时可见。

<style type="text/css">
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }
</style>
<div id="footer">I am footer</div>

高度和上边距应该相同，这样页脚就不会显示在内容上。

赞(0）回复(0）举报 2022-12-24

pkln4tw63#

你的标题和评论暗示你并没有寻找一个粘性页脚（当内容滚动到窗口下方时粘在窗口底部）。我假设你正在寻找一个页脚，如果内容没有填满窗口，它将被强制放在窗口底部，如果内容超出窗口边界，它将被向下推到内容底部。
您可以通过以下方法来实现这一点。

&ltstyle>
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}
</style>

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

来源：How to keep footers at the bottom of the page

赞(0）回复(0）举报 2022-12-24

y0u0uwnf4#

用途

<div style="position:fixed; bottom:0; height:auto; margin-top:40px;
            width:100%; text-align:center">
  I am footer
</div>

页脚不会向上

赞(0）回复(0）举报 2022-12-24

wfveoks05#

看看这个，在火狐和IE上工作

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>

赞(0）回复(0）举报 2022-12-24

hgqdbh6s6#

我使用的简单解决方案，适用于IE8+

给予最小高度：100%在html上，这样如果内容较少，则静态页面将占据整个 windows 高度，页脚将粘在页面底部。当内容增加时，页脚将随内容下移，并保持粘在底部。
JS小提琴工作演示：http://jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

<html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

赞(0）回复(0）举报 2022-12-24

dba5bblo7#

我是个新手，这些方法对我不起作用，但是，我尝试了css中的margin-top属性，简单地添加了内容像素+5的值。
例如：我的内容布局高度为1000 px，所以我在页脚css中设置了1005 px的上边距值，这样我就有了5 px的边框和一个令人愉快地位于网站底部的页脚。
可能是业余的方法，但是很有效！！！

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何将页脚(div)与页面底部对齐？[duplicate]

7条答案

CSS

Html

相关问题

热门标签

最新问答