前端保证footer在浏览器最底端

最新推荐文章于 2022-05-25 08:45:01 发布

沼沼同学

最新推荐文章于 2022-05-25 08:45:01 发布

阅读量494

点赞数

分类专栏：前端文章标签：前端保证footer在浏览器最底端

本文链接：https://blog.csdn.net/u014609625/article/details/44345809

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

沼沼同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端保证footer在浏览器最底端

1.概述保证一个div在浏览器的最下方。一般是footer。当内容高度不能占满浏览器，footer在浏览器最下方。占满浏览器超过浏览器，footer在占满的内容下方。2，代码 body {height:100%;}#content {min-height:100%;_height:100%;position: relative;}#footer {
复制链接

扫一扫