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

来源：互联网发布：unity3d模型下载编辑：程序博客网时间：2024/06/06 15:01

需求：有时候，当页面内容较短，撑不开浏览器高度，但是又希望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;}/*第二种方法*/.wapper{    position: relative;   /*重要！保证footer是相对于wapper位置绝对*/    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/    min-height: 100% ; /* IE6不支持，IE6要单独配置*/    height:100%; /* IE在高度不够时会自动撑开层*/}.footer{   position: absolute;  bottom: 0; /* 关键 */   left:0; /* IE下一定要记得 */   height: 80px;         /* footer的高度一定要是固定值*/   background:#333;   color:#fff;   font-size:16px;   text-align:center;   width:100%;}.main{   padding-bottom: 80px; /*重要！给footer预留的空间*/}

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

第三种 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