最近在做一个项目时,有一个页面左侧有导航栏,右侧是内容,由于右侧内容不确定,所以右侧盒子的高度是根据内容的多少自动变化的,而我希望左侧导航栏的高度可以根据右侧盒子的高度变化而变化,当然,如果你是希望右边盒子高度自适应于左边也可以的。刚好我在慕课网上学习的时候看到一个老师讲了这种方法,今天就分享一下这个方法。
要实现这个布局用到的属性有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>
最后效果: