如何使页面底部始终在最底下

方法一:footer 高度固定+绝对定位

<html>

<head>

<style type="text/css">

html{height:100%;}

body{min-height:100%;margin:0;padding:0;position:relative;}

.header{background-color: #ffe4c4;}

.main{padding-bottom:100px;background-color: #bdb76b;} /* main的padding-bottom值要等于或大于footer的height值 */

.footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

</style>

</head>

<body>

<div class="header">header</div>

<div class="main">main content</div>

<div class="footer">footer</div>

</body>

</html>

效果:

 

 

 还有2中方式,这个是我常用的一种。

第二种是:footer高度固定+margin负值。样式和第一张类似,就是 footer{  margin-top: -100px}

第三中就是footer高度任意,+js,

就是判断当前页面内容是否大于可视窗口高度,

转载于:https://blog.csdn.net/u012258564/article/details/72771188

posted @ 2019-04-17 10:18  以后。h  阅读(1442)  评论(0编辑  收藏  举报