|
最近在做一个项目时，有一个页面左侧有导航栏，右侧是内容，由于右侧内容不确定，所以右侧盒子的高度是根据内容的多少自动变化的，而我希望左侧导航栏的高度可以根据右侧盒子的高度变化而变化，当然，如果你是希望右边盒子高度自适应于左边也可以的。刚好我在慕课网上学习的时候看到一个老师讲了这种方法，今天就分享一下这个方法。
要实现这个布局用到的属性有overflow,padding,margin。
下面就是我项目的截图，左边的导航栏高度自适应右边内容。话不多说，直接开始吧。
还是先写好html: <span style="font-family:Comic Sans MS;font-size:14px;"><div class="all">
<div class="left"></div>
<div class="right"></div>
</div></span>
要注意，这两个盒子外面一定要有一个父元素包裹。
先做一个基本布局如下：
<span style="font-family:Comic Sans MS;font-size:14px;">.left{
width: 200px;
height: 200px;
float: left;
background-color: #678232;
}
.right{
width: 500px;
height: 700px;
float: left;
background-color: #23ef67;
}</span>
看看效果：
然后重点来了，基本思路是这样的，给两边盒子一个非常大的margin值，然后再给一个跟margin值相等的负的padding值，这个负的padding值是为了填充margin的，而由于我们给的margin值很大，为了避免滚动条滚到天荒地老，我们再给父盒子加一个overflow:hidden，两个子盒子也分别加一个overflow:hidden，就成功了，贴出代码：
<span style="font-family:Comic Sans MS;font-size:14px;">.all{
overflow: hidden;
}
.left{
width: 200px;
height: 200px;
float: left;
background-color: #678232;
overflow: hidden;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.right{
width: 500px;
height: 700px;
float: left;
background-color: #23ef67;
overflow: hidden;
margin-bottom: -10000px;
padding-bottom: 10000px;
}</span>
最后效果：
| 
转播
