Stick footer的实现

小菜鸡就是我

于 2020-11-26 22:00:11 发布

阅读量183

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/weixin_42863256/article/details/110206630

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

网上看了一大堆别人的方法要么就是根本无法完成效果要么就是右边会出现滚动条终于找到一个能用的方法
1.flex布局利用纵向flex 布局中间自动填充但设置外部最小高度100vh;可完全实现效果


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
html, body{
     height: 100% ;
    margin: 0;
    padding: 0 ;
}
   

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  height: 60px;
  background-color: blue;
}


    </style>

</head>
<body>
 <div>
<div class="container">
   
  <div class="content">内容</div>
  <div class="footer">页脚</div>

</div>
</div>

</body>