前端保证footer在浏览器最底端_safari footer 前端-优快云博客

本文链接：https://blog.youkuaiyun.com/u014609625/article/details/44345809

本文介绍了一种使用CSS和HTML布局使div元素（通常是页脚）始终位于浏览器窗口底部的方法。无论页面内容多少，页脚都会保持在底部位置，只有当内容高度超过浏览器窗口时，页脚才会出现在内容下方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.概述

保证一个div在浏览器的最下方。一般是footer。当内容高度不能占满浏览器，footer在浏览器最下方。占满浏览器超过浏览器，footer在
占满的内容下方。

2，代码

<style>
     body {

height:100%;
}
#content {
min-height:100%;
_height:100%;
position: relative;
}

#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}

</style>
<body>
          <div id="content">
               <div id="main">
                      <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
              </div>
              <div id="footer">
                      <h1>Footer</h1>
              </div>
          </div>
     </body>