css之两栏布局左侧固定右侧高度自适应

css两栏布局之左侧固定右侧高度自适应

先看这样的html+css结构:

  .main {
width: 900px;
overflow:hidden;
margin: 0 auto;
border:1px solid #000;
}
.left {
width: 600px;
float:left;
background: #ccb;
}
.right {
float:left;
width: 300px;
background: #acf;
}
  <div class="main">
<div class="left">
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
</div>
<div class="right"></div>
</div>

条件:左栏右栏均宽度固定,现在左侧高度由内容自动撑开,问怎样实现右侧高度随左侧自适应变化。

由以上的代码可以得到下图


可以看到右侧高度并没有撑开。那么要实现右侧高度自适应,常用的有三种方法:

  • 1 背景图片法: 
    先用ps做一个背景图,注意背景图的宽及颜色要和html+css里左右栏的宽和颜色相对应。


然后把这个图片添加到父盒子的背景:即给父盒子.main添加一条属性: 
background: url(bg.jpg) repeat-y; 
这样图片就把高度撑开了:


    一些著名的网站如搜狐,12306等就采用了这种方法。。

  • 2 margin和padding补偿法:

    给右侧栏代码css样式里添加一个足够大的padding-bottom值,再添加相等的负的margin-bottom值,这样右侧高度就撑开了,右侧栏代码如下:

       .right {
    float:left;
    width: 300px;
    background: #acf;
    padding-bottom:100000em;
    margin-bottom:-100000em;
    }

    这种方法还是相当简单方便的,只是打开控制台可以看到右侧栏盒模型有一个很大的padding值,强迫症者慎用。 

  • 3 绝对定位法:

    父盒子设置相对定位,右侧栏设为绝对定位且right:0,去掉浮动属性,这样右盒子脱离标准文档流就可以加属性height:100%,它的高度就和和父盒子同步了。 
    右侧栏代码变为:

    .right {
position:absolute;
height:100%;
right:0;
width: 300px;
background: #acf;
}
posted @ 2017-05-07 23:39  circe  阅读(...)  评论(...编辑  收藏