首页 > 代码库 > css之两栏布局左侧固定右侧高度自适应
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;
}
css之两栏布局左侧固定右侧高度自适应
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。