两列布局，左边自适应，右边高度不定

Posted 2020-11-20 ganlu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两列布局，左边自适应，右边高度不定相关的知识，希望对你有一定的参考价值。

布局如下图：

技术分享图片

当content中内容小于页面高度时，占满整个页面；

当content中内容大于液面高度时，以内容高度为准。

 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 };

每当浏览器窗口大小改变的时候，重置一下页面内容的高度。

以上是关于两列布局，左边自适应，右边高度不定的主要内容，如果未能解决你的问题，请参考以下文章

CSS布局，单列宽度固定，另一列自适应。

如何通过 CSS 实现一个左边固定宽度右边自适应的两列布局

css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度

两列自适应布局及三列自适应布局

CSS三栏布局实现，左右固定，中间自适应

如何通过 CSS 实现一个左边固定宽度右边自适应的两列布局