css布局: 两栏自适应高度

只使用css实现有两种方式,

一种是通过相对定位,再绝对定位获取父亲元素的高度,

一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 
 9 <style>
10     *{margin: 0; padding: 0}
11     .wrap{
12         position: relative;
13         width:50px;
14     }
15     .wrap .left {
16         position: absolute;
17         height: 100%;
18         top: 0;
19         left: 50px;
20         background: lightblue;
21     }
22     .wrap .main {
23         background: lightgray;
24     }
25 </style>
26 实现一,通过 定位获取父亲元素的高度实现
27 <div class="wrap">
28     <div class="left">
29         侧栏
30     </div> 
31     <div class="main">
32     可以改变 高度 侧栏自动识别高度
33     </div>
34 </div>
35 
36 <style>
37     .wrap2{
38         overflow: hidden;
39     }
40     .wrap2 .left {
41         float: left;
42         width:20px;
43         margin-bottom: -999em;
44         padding-bottom: 999em;
45         background: lightgray;
46     }
47     .wrap2 .main {
48         float: left;
49         width:50px;
50         background: lightblue;
51     }
52 </style>
53 实现二,使用margin 和padding 配合使用
54 <div class="wrap2">
55     <div class="left">
56         侧栏
57     </div>
58     <div class="main">
59         可以改变 高度 侧栏自动识别高度
60     </div>
61 </div>
62 
63 </body>
64 </html>

弊端:

方案 2 针对是背景, 使用边框会无下边框需要注意,因为超出隐藏了,部分效果也有影响,

相关阅读:
KVM镜像管理利器-guestfish使用详解
两台linux机器时间同步
git配合tortoiseGit的基础使用
使用yum来下载RPM包而不进行安装
Linux解压缩总结
Linux下使用git命令及github项目
linux shell常用快捷键
调用 sphinx-build生成HTML文件
复制virtualenv环境到其他服务器环境配置的方法
CentOS 6.5 PYPI本地源制作

原文地址：https://www.cnblogs.com/moki/p/4690976.html

css布局: 两栏 自适应高度

css布局: 两栏自适应高度