布局如下图：
当content中内容小于页面高度时，占满整个页面；
当content中内容大于液面高度时，以内容高度为准。
test.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="height.css"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="sidebar">sidebar</div> 11 <div class="content-right"> 12 <div class="header">header</div> 13 <div class="content"> 14 content 15 </div> 16 <div class="footer">footer</div> 17 </div> 18 </div> 19 </body> 20 <script src="height.js"></script> 21 </html>
test.css
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
}
.container {
overflow: hidden;
}
.sidebar {
width: 12.5%;
float: left;
margin-bottom: -9999px;
padding-bottom: 9999px;
background-color: red;
}
.content-right {
margin-left: 12.5%;
}
.header {
width: 100%;
background-color: blue;
height: 100px;
}
.content {
width: 100%;
background-color: green;
}
.footer {
width: 100%;
height: 50px;
background-color: pink;
}
注意：一定要添加一个container包含所有内容，并添加overflow：hidden；否则会有9999px的空白。如果把overflow：hidden；添加到body上，页面将没有高度上的滚动条。
test.js
1 var _height = document.documentElement.clientHeight-150;
2 document.getElementsByClassName(‘content‘)[0].style.minHeight = _height + ‘px‘;
3 window.onresize = function() {
4 var _height = document.documentElement.clientHeight-150;
5 document.getElementsByClassName(‘content‘)[0].style.minHeight = _height + ‘px‘;
6 };
每当浏览器窗口大小改变的时候，重置一下页面内容的高度。
原文地址：https://www.cnblogs.com/ganlu/p/9235215.html
时间： 2024-08-29 20:09:30