鍍金池/ 問答/HTML/ css header 固定 footer也固定 怎么實(shí)現(xiàn)？

css header 固定 footer也固定 怎么實(shí)現(xiàn)？

這里footer也固定包括兩種情況，第一種是當(dāng)頁(yè)面內(nèi)容尚未填充滿的時(shí)候，頁(yè)腳需要固定在底部，第二種是頁(yè)面填充滿后，頁(yè)腳需要隨頁(yè)面內(nèi)容的增加而填充在主體內(nèi)容的下方。

我需求這兩種情況結(jié)合在一起實(shí)現(xiàn)！

第二張需求單獨(dú)實(shí)現(xiàn)
<html>
<head>
<style type="text/css">
html,body{height:100%}
.footer {margin-top:-30px;height:30px;background-color:#eee;}
.wrap{min-height:100%}
.main{padding-bottom:30px;overflow:hidden;}
</style>
</head>
<body>

<div class="wrap">
    <div class="main">這里是網(wǎng)頁(yè)的主體</div>
</div>
<div class="footer">這里是頁(yè)腳</div>

</body>
</html>

回答
編輯回答
六扇門

css sticky footer布局

方法一：
flex

方法二：

<div class="wrap">
  <div class="wrap-main">
    <div class="wrap-content">main content</div>
  </div>
  <div class="wrap-footer">footer content</div>
</div>
.wrap{
    overflow: auto;
  }
  .wrap-main{
    min-height: 100%
  }
  .wrap-content{
    padding-bottom: 100px;
  }
  .wrap-footer{
    margin-top: -100px;
  }
2018年1月25日 13:52
編輯回答
孤巷

flex吧 一般這種布局用在手機(jī)端

2017年4月27日 08:45
編輯回答
尛曖昧

不考慮兼容性可以用flexbox布局

也可以看看我之前寫過的這篇博客

2017年2月15日 08:28
編輯回答
心沉

兩種都可以用css來實(shí)現(xiàn)
第一種：

 div{height:100%;}
    header{height:50px;}
    div.body{height:calc(100% - 100px);}
    footer{height:50px;}

第二種：

div{height:100%;}
    header{height:50px}
    div.body{min-height:1px;}
    footer{height:50px}

二者結(jié)合：

div{width:100%;height:100%;}
    header{height:50px}
    div.body{min-height:1px;height:auto;max-height:calc(100% - 100px);}
    footer{height:50px}

html結(jié)構(gòu)

<html>
    <body>
        <div>
            <header></header>
            <div class="body"></div>
            <footer></footer>
        </div>
    </body>
</html>
2017年10月11日 10:48
編輯回答
故人嘆

可以試試position：fixed;
footer可以使用絕對(duì)定位，相對(duì)與page元素，結(jié)構(gòu)比如這樣

 <div class="page">
    <div class="header">11111</div>
    <div class="footer">22222</div>
  </div>
 .page{
    position: relative;
 }
.footer{
    position: absolute;
    bottom: 0;
}

這樣footer就一直居于page元素的底部了
page還要設(shè)計(jì)一個(gè)min-height,值為一開始沒內(nèi)容的時(shí)候的高度

2018年5月22日 19:38
編輯回答
單眼皮

默認(rèn) 把footer放在html頁(yè)面末尾
寫一個(gè)class直接絕對(duì)定位在 bottom 0 left 0
js寫個(gè)定時(shí)器，如果頁(yè)面內(nèi)容小于游覽器高度，就加class 大于就去了class

2018年4月15日 04:02