主体高度不定，footer在最下面

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

天空影

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

阅读量829

点赞数

分类专栏：大前端-html/css 文章标签： html css

本文链接：https://blog.csdn.net/jx950915/article/details/78866845

版权

大前端-html/css 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

需求：有时候，当页面内容较短，撑不开浏览器高度，但是又希望footer能在窗口最低端

这里提供三种解决方法，有两种的思路是一样的，结构也是一样的

第一种

html

<div class="wrap">
    <div class="main">

    </div>

</div>
<div class="footer">
    <h1>页面高度不满，底部固定</h1>
</div>

css

/*第一种方法*/
* { margin:0; padding:0; }
html, body, .wrap { height:100%; }
.wrap {
    height:auto;
    min-height:100%;
    _height:100%;
    background:#CCC;
}
.main { padding-bottom:80px; }
.footer {
    position:relative;
    height:80px;
    line-height: 80px;
    margin-top:-80px;
    background:#333;
    color:#fff;
    font-size:16px;
    text-align:center;
}

效果图就不看了，自己复制下来看就行了

第二种 flex布局

html

<body class="wapper">
    <header>头部</header>
    <main class="main-content">
        <p>实现</p>
    </main>
    <footer>底部</footer>
</body>

css

   *{margin:0;padding:0}
   .wapper {
       display: flex;
       display: -webkit-flex; /* Safari */
       min-height: 100vh;
       flex-direction: column;
   }
   .main-content {
       flex: 1;
   }
   header,footer{
       height:80px;
       background:gray;
   }
   p{
       padding:80px 0;
       text-align: center;
   }

刚好以前也碰到过这种需求，但是当时也没考虑很多，今天又被人问了一次这个东西，所以就了解一下咯

天空影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
主体高度不定，footer在最下面

需求：有时候，当页面内容较短，撑不开浏览器高度，但是又希望footer能在窗口最低端这里提供三种解决方法，有两种的思路是一样的，结构也是一样的第一种html&lt;div class="wrap"&gt; &lt;div class="main"&gt; &lt;/div&gt;&lt;/div&gt;&lt;div class="footer
复制链接

扫一扫