css实现div两列高度自适应实例介绍

方法一：

纯CSS实现高度自适应：

 代码如下 复制代码

.content{ overflow:hidden; }

.left, .center, .right{ padding-bottom:500px; margin-bottom:-500px;}

 

方法二：

以下JS代码添加到</body>结束之前：

 代码如下 复制代码

<script type=”text/javascript”>
<!–
var l=document.getElementById(“left_side”).scrollHeight;
var r=document.getElementById(“right_main”).scrollHeight
if (r>l)
{
document.getElementById(“left_side”).style.height=document.getElementById(“right_main”).scrollHeight+”px”;

}
else
{
document.getElementById(“left_side”).style.height=document.getElementById(“right_main”).scrollHeight+”px”;
}
–>
</script>

最后，CSS还得加上这个：

html,body{ height:100%;}

方法三，

三行两列高度自适应

 

 代码如下 复制代码

<style type="text/css">
body{ margin:0; background:#f5f5f5;}
.Header{ width:600px; margin:auto; background:green; height:80px;}

.Mian{ width:600px; margin-left:auto; margin-right:auto;}

.Mianbg{ width:600px; background:#CC9999; float:left;}

.left{ width:300px; background:#336666; float:left;}

.right{ width:300px; background:#FF9966; float:right;}

.right_content{ width:200px; background:#666633; margin-left:auto; margin-right:auto; height:50px; margin-top:5px;}

.Footer{ margin:auto; width:600px; background:#666699; clear:both; height:80px;}
</style>
<title>css</title>
</head>
<body>
<div class="Header">Header</div>
<div class="Mian">
<div class="Mianbg">
<div class="left"> Left</div>
<div class="right">
<div class="right_content">Right Content</div>
<div class="right_content">Right Content</div>
<div class="right_content">Right Content</div>
<div class="right_content">Right Content</div>
</div>
</div>
</div>
<div class="Footer">Footer</div>

效果图如下

时间： 2024-10-04 15:26:08

css实现div两列高度自适应实例介绍的相关文章

css DIV三列高度自适应

 代码如下 复制代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

css 两列宽度自适应三种测试例子

两列宽度自适应测试 左侧浮动,右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉,而且有一个 IE6 3px bug Right 测试子元素能否使用width:100% 左侧绝对定位,右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug Right 测试子元素能否使用width:100% 计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug"> 另外还有网上的一种方法,可能不用确定左侧宽度,利用那啥hasLa

div布局，上中下结构，怎么让高度固定的div始终在高度自适应的div下面

问题描述 div布局,上中下结构,怎么让高度固定的div始终在高度自适应的div下面 我做了一个页面布局为上中下,上面和下面的高度都是固定的,中间的高度是自适应的,下面那个div要怎么设置才能紧挨着中间的那个div我写的都跑到上面去了 解决方案 试试,下面的用下边距0固定 解决方案二: 贴出具体代码看看吧. 解决方案三: 正常就是上中下,除非你设置其他样式了. <div style=""height:100px"">上面</div> <

DIV+CSS：网页一行两列背景自适应

网页布局中常有的一种情况就是网页主体部分分成一行两列:而在很多种情况下,设计师们常把左右两列的背景色设计成不同色彩,以实现内容块的明显区分:但这样的设计给布局提出了一个看似简单,而实现非常难的问题:那就是左右两列怎么样实现背景高度自适应,及左边内容高于右边时,右边背景色也要和左边一样:右边内容高于左边时,左边背景色也要和右边一样: 当年为了实现这个,我在网上查过无数的文章,都没有很好的解决方案:多数人用很大的负数实现,也有人用javascript实现: 后来因为感觉这样实现不合理,所以我一直用表

css实现二列宽度自适应实例

从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值:  代码如下 复制代码 #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { bac

解决div列高度自适应的三种最常用的方法

解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft.divright为例). 1.利用"clear:both"背景填充(推荐!!!) 这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题.三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px. CSS代码: #main{width: 780px;margin: 0;background: url(bg.gif) #FFFFFF repe

解决列高度自适应(列高度相同)的五种方法

解决|自适应 1.背景图填充这是使用最广泛的一种做法,无hacks,推荐使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

解决列高度自适应(相同)的五种方法_经验交流

1.背景图填充 这是使用最广泛的一种做法,无hacks,推荐使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

MySQL中两表UNION查询实例介绍

一,union查询用法 union查询比较简单,就好像把两张表合并了,字段也合成一块 假如是 select * from table1, table2 的话,两个的相同的字段不会合并但 select a1 from table1 union select a1 from table2 这样的话就可以把两个表的a1合成一个 上面不知道你看明白了,没有我们接着看实例 一使用SELECT子句进行多表查询 SELECT 字段名 FROM 表1,表2 - WHERE 表1.字段 = 表2.字段 AND 其