css header 固定 footer也固定怎么实现？

这里footer也固定包括两种情况，第一种是当页面内容尚未填充满的时候，页脚需要固定在底部，第二种是页面填充满后，页脚需要随页面内容的增加而填充在主体内容的下方。

我需求这两种情况结合在一起实现！

第二张需求单独实现

<html>

<head>

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="main">这里是网页的主体</div>

</div>

<div class="footer">这里是页脚</div>

</body>

</html>

qq_遁去的一_1

浏览 1042回答 2

2回答

撒科打诨

可以试试position：fixed;footer可以使用绝对定位，相对与page元素，结构比如这样 <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还要设计一个min-height,值为一开始没内容的时候的高度

慕标5832272

两种都可以用css来实现第一种： 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}二者结合：div{width:100%;height:100%;}    header{height:50px}    div.body{min-height:1px;height:auto;max-height:calc(100% - 100px);}    footer{height:50px}html结构<html>    <body>        <div>            <header></header>            <div class="body"></div>            <footer></footer>        </div>    </body></html>

随时随地看视频慕课网APP

css header 固定 footer也固定 怎么实现？

2回答

css header 固定 footer也固定怎么实现？