在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何實現(xiàn)css上中下布局，高度不足，footer固定在底部，如出現(xiàn)滾動條，foo

如何實現(xiàn)css上中下布局，高度不足，footer固定在底部，如出現(xiàn)滾動條，footer和body部分一并向下滾動？

如何實現(xiàn)css上中下布局，高度不足時，footer固定在底部，如出現(xiàn)滾動條（高度比較大了），footer和body部分一并向下滾動？

網(wǎng)上找了一段，可以固定在底部，但是當body高度超過一屏時，footer 并不會出現(xiàn)在最下面

<div class="wapper xxy-zh">
  <div class="header">
    上、中、下布局案例
  </div>
  <div class="content">
    body 部分
  </div>
  <div class="footer">
    Copyright ? 2014 -2016 粵 ICP 備 14052360 號
  </div>
</div>
.wapper{
    background: #f8f8f8;
    /*position: relative;*/
    height: auto;
    min-height: 100%;
    background-color: #fff;
}

.header{
  height: 100px;
  background-color: red;
}

.content{
  /*主要代碼應(yīng)該是這句*/
  padding-bottom: 81px;/*footer 的高度*/
}

.footer{
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #d8dfe7;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    background: #fff;
}
回答
編輯回答
編輯回答
編輯回答
大濕胸

bootstrap 的實例精選里面就有這種布局

2017年8月12日 05:26
編輯回答
安于心

footer可以fix

2017年12月30日 12:40
編輯回答
不歸路

……就是把footer放進content里？

2017年12月23日 17:55
編輯回答
墨沫

看看這個，不知道是不是你想要的，https://blog.csdn.net/u012076...

2018年8月4日 07:26
編輯回答
浪婳

謝謝各位小伙伴，原來之前在精簡代碼的的時候把主句注釋掉了——之前發(fā)現(xiàn)可以不要，但是現(xiàn)在又必須要

.wapper{
    background: #f8f8f8;
    /*position: relative;*/ /*放開這句即可*/
    height: auto;
    min-height: 100%;
    background-color: #fff;
}
2018年4月7日 21:27
編輯回答
柒槿年
html {
  min-height: 100%;
  position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}

這個很簡單，肯定好，不好接著找我

2017年7月6日 11:10