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

最新推荐文章于 2022-07-14 16:03:07 发布

转载最新推荐文章于 2022-07-14 16:03:07 发布 · 930 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gucan/p/6822900.html

文章标签：

#前端 #ViewUI

本文介绍了三种实现CSS两栏布局中左侧固定、右侧高度自适应的方法：使用背景图片、margin和padding补偿法以及绝对定位法。

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

转载于:https://www.cnblogs.com/gucan/p/6822900.html