使用position绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化效果，我们在重构页面时间经常会碰到使用一个外部大容器里面放置两个左右浮动容器的布局，有时候为了视觉效果，我们需要让里面两个子容器的高度必须保持一致，但是在无法确定的容器具体高度的情况下（因为DIV容器经常需要根据里面内容的多少来自定义高度），那么我们唯一的办法就是让里面的容器高度跟随外部父容器高度变化而变化，但是我们如果我们纯粹使用使用height:100%;或者height:来定义内部容器自适应高度，貌似都无法实现让内部容器高度随着外部父容器高度变化而变化，所以我们必需要使用position绝对定位属性来配合协助实现。
请看下面案例：这个左边导航div高度会随着外部box父div的高度变化而变化，而box父div高度是根据里面那个右边div中的内容多少而自适应变化。
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&xmlns=&http://www.w3.org/1999/xhtml&&&&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&&MJBlog()&&type=&text/css&&*&{margin:0;padding:0;font-size:12list-style:border:0;}&body{font-family:&Arial,&Helvetica,&sans-&background-color:#edf0}&a{&text-decoration:}&a:hover{&text-decoration:}&.clear{&display:&height:0&line-height:0&font-size:0&clear:}&.box{&width:960&margin:20px&&height:&background-color:#FFFFFF;&position:}&.left{&width:160&height:100%;&background-color:#&position:&top:0&left:0}&.left_wu{&width:160&height:100%;&background-color:#&float:}&.left&h1,.left_wu&h1{&width:160&height:30&background-color:#67a727;&text-align:&line-height:30&color:#FFFFFF;&font-size:14&margin-top:30}&.nav{&width:160&height:&margin:12px&0}&.nav&a{&width:160&height:30&line-height:30&text-align:&display:&color:#588c0e;}&.nav&a:hover{&background-color:#}&.nav&.a_dq{&color:#333333;&background-color:#&font-weight:}&&.right{&width:800&height:&float:}&.right&h1{&width:800&height:500&text-align:&line-height:100&font-size:14&font-weight:100;}&&&&&&class=&box&&&class=&right&&这个是有使用position绝对定位属性，所以左边的导航栏高度会随着父容器高度而变化&&&&class=&clear&&&class=&left&&个人资料&&class=&nav&&&href=&#&&class=&a_dq&基本信息&&href=&#&修改头像&&href=&#&帐号绑定&&href=&#&个性签名&&&&&&class=&box&&&class=&left_wu&&个人资料&&class=&nav&&&href=&#&&class=&a_dq&基本信息&&href=&#&修改头像&&href=&#&帐号绑定&&href=&#&个性签名&&&&class=&right&&这个是没有使用position绝对定位属性，所以左边的导航栏高度没有随着父容器高度而变化，视觉效果就会差点&&&&class=&clear&&&&&
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
好用，多谢后使用快捷导航没有帐号？
只需一步，快速开始
查看: 6709|回复: 14
div+css 左右两列高度自适应以及父级div也跟着自适应子级的高度
UID242114在线时间 小时积分1219帖子离线17343 天注册时间
银牌会员, 积分 1219, 距离下一级还需 1781 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&左侧固定，右侧高度100%自适应&/title&
&style type=&text/css& media=&screen&&
#main {width:500 height:300&&background:# border:1px solid #600; float:}
#sidebar {width:200 height:300 background-color:#ff0000; float:&&border:1px solid #060; }
#content {width:200 height:100%;&&background:#0000&&border:1px solid #006; float:}
&div id=&main&&
& & &div id=&sidebar&&
& && && &&p&Layer - left&/p&
& & &/div&
& & &div id=&content&&
& && && &Layer - right
& & &/div&
&/body&上面的是 Layer - right
能自适应高度了，，但问题是如果 Layer - left的内容很多，超过了父级div定义的300px之后，会发现父级div不会自适应高度了，，而且right的高度还是保持300不会增加，，
我现在的问题就是，，当left的内容超过父级定义的300之后怎么样能让父级自适应left的高度，同时right也同高，，（left的高度是不确定的，）
UID242114在线时间 小时积分1219帖子离线17343 天注册时间
银牌会员, 积分 1219, 距离下一级还需 1781 积分
这里高手如云，，怎么就没有一个能来告诉一下解决方法呢？搜到的方法都只能解决一个问题，，当两个问题并到一块就不能用了。
UID242114在线时间 小时积分1219帖子离线17343 天注册时间
银牌会员, 积分 1219, 距离下一级还需 1781 积分
来人啊，，知道的回答一下
UID145873在线时间 小时积分349帖子离线17343 天注册时间
中级会员, 积分 349, 距离下一级还需 151 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&左侧固定，右侧高度100%自适应&/title&
&style type=&text/css& media=&screen&&
html,body {height:100%;margin:0;padding:0;}
#sidebar {width:200 height:300 background:#ff0000; border:1px solid #060; float: }
#content {width:200 height:100%;
background:#0000 border:1px solid #006;}
&div id=&main&&
&div id=&sidebar&&&p&Layer - left&/p&&/div&
&div id=&content&&Layer - right&/div&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 hbjswj 于
15:12 编辑 ]
UID453238在线时间 小时积分682帖子离线17343 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
高手开贴时，莫非楼主木赶上？
（在第一个中把右列删了就行了）
[[i] 本帖最后由 ccddmm 于
15:19 编辑 ]
UID461136在线时间 小时积分58帖子离线17343 天注册时间
初级会员, 积分 58, 距离下一级还需 142 积分
楼上的回答的好,把右列一删只用左边和主框架就好了
UID242114在线时间 小时积分1219帖子离线17343 天注册时间
银牌会员, 积分 1219, 距离下一级还需 1781 积分
原帖由 [i]dskf521 于
15:36 发表
楼上的回答的好,把右列一删只用左边和主框架就好了
右列是有存在的理由的，，要不怎么非要放个右列上去呢
UID453238在线时间 小时积分682帖子离线17343 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
原来楼主不想要宽度自适应，是想要个最小高度。
&style type=&text/css& media=&screen&&
#main {width:500_height:300min-height:300 background:# border:1px solid #600; float:overflow:_overflow:}
#sidebar {width:200background-color:#ff0000; float:
border:1px solid #060; }
#content {width:200 background:#0000
border:1px solid #006; float:}
.row{margin-bottom:-10000padding-bottom:10000}
&div id=&main&&
&div id=&sidebar& class=&row&&
&p&Layer - left&/p&
&div id=&content&
class=&row&&
Layer - right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
right&br /&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 ccddmm 于
20:54 编辑 ]
UID453238在线时间 小时积分682帖子离线17343 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
UID242114在线时间 小时积分1219帖子离线17343 天注册时间
银牌会员, 积分 1219, 距离下一级还需 1781 积分
谢谢四楼的帮助，，但是不是你那种效果，，不管左右两列各有多少内容它们两例始终是一样高的，，并且父级也跟子级一样高的
[[i] 本帖最后由 shiwoya 于
16:55 编辑 ]
UID242114在线时间 小时积分1219帖子离线17343 天注册时间
银牌会员, 积分 1219, 距离下一级还需 1781 积分
原帖由 [i]ccddmm 于
16:12 发表
原来楼主不想要宽度自适应，是想要个最小高度。
& && && &Layer - left
& && && &Layer - right
& && && & right
& & & && & right
& & & && & right
& & & && & right
& & & && & right
& & & && & righ ...
.row{margin-bottom:-10000padding-bottom:10000}
这里是起了什么作用？为什么这样设？
overflow:overflow:_overflow:}还有这里也不明白，能不能解答一下呢？谢谢了
UID446934在线时间 小时积分463帖子离线17343 天注册时间
中级会员, 积分 463, 距离下一级还需 37 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Equal height(列高度相同的方法)&/title&
&style type=&text/css&&
#container { overflow: }
#container div { float: background: # width: 200 padding: 10 margin-bottom: -2000 padding-bottom: 2000 }
#container .col2 { background: # }
.clear{clear:}
&div id=&container&&
&p&当秋月刚刚露出眉毛的时候
　　她的温柔与娴静，也在我的眼窝里
　　闪了一下。露珠儿
　　在草叶间留步，像一颗宝石
　　闪烁在梦的夜晚，让我更想写诗
　　夜让我想，把皎洁的秋月
　　放在一盏路灯的高度上，刚刚适合
　　渐渐地照亮前路
　　让我刚好看清脚步和词语之间的转换
　　用清水幽幽的目光来抚慰
　　已经流落的泪滴
　　谁是最痴情的女子，一首诗的魅惑
　　就可以牵住她的一生
　　像夜色一样无穷，像月光一样无穷
　　像灵魂的飞翔一样无穷
　　也像灯下的字海一样无穷
　　从一支修好的笔中流出墨汁&/p&
&div class=&col2&&
当秋月刚刚露出眉毛的时候
　　她的温柔与娴静，也在我的眼窝里
　　闪了一下。露珠儿
　　在草叶间留步，像一颗宝石
　　闪烁在梦的夜晚，让我更想写诗
　　夜让我想，把皎洁的秋月
　　放在一盏路灯的高度上，刚刚适合
　　渐渐地照亮前路
　　让我刚好看清脚步和词语之间的转换
　　用清水幽幽的目光来抚慰
　　已经流落的泪滴
　　谁是最痴情的女子，一首诗的魅惑
　　就可以牵住她的一生
　　像夜色一样无穷，像月光一样无穷
　　像灵魂的飞翔一样无穷
　　也像灯下的字海一样无穷
　　从一支修好的笔中流出墨汁
　　与我精心的疏通有关
　　那些流失的脚印，又让我重新记起
　　但是也让我害怕迷失
　　所以我想，有一盏如月的路灯　&/p&
&p&当秋月刚刚露出眉毛的时候
　　她的温柔与娴静，也在我的眼窝里
　　闪了一下。露珠儿
　　在草叶间留步，像一颗宝石
　　闪烁在梦的夜晚，让我更想写诗
　　夜让我想，把皎洁的秋月
　　放在一盏路灯的高度上，刚刚适合
　　渐渐地照亮前路
　　让我刚好看清脚步和词语之间的转换
　　用清水幽幽的目光来抚慰
　　已经流落的泪滴
　　谁是最痴情的女子，一首诗的魅惑
　　就可以牵住她的一生
　　像夜色一样无穷，像月光一样无穷
　　像灵魂的飞翔一样无穷
　　也像灯下的字海一样无穷
　　从一支修好的笔中流出墨汁
　　与我精心的疏通有关
　　那些流失的脚印，又让我重新记起
　　但是也让我害怕迷失
　　所以我想，有一盏如月的路灯
　　有温情、明朗与洁净的眼睛
　　把自己看清
　　尽量地放低自己，目光柔和
　　能与花朵默契，也能大胆地袒露
　　真实痛过的伤疤&/p&
&p class=&clear&&返回&a href=&& title=&三叶草的博客&&三叶草的博客&/a&&/p&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 kele527 于
17:01 编辑 ]
UID453238在线时间 小时积分682帖子离线17343 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
回复 11# shiwoya [楼主] 的帖子
一、.row{margin-bottom:-10000padding-bottom:10000}
这里是起了什么作用？为什么这样设？
见此帖：。
实际上你把overflow:删去再看就知道怎么回事了。
二、overflow:overflow:_overflow:
由于匆忙，多写了一个overflow:前一个是给支持min-height浏览器看的，
意思是把超过左（或右，最高的一个）的padding-bottom给隐藏掉。后一个是给ie6看的，由于设了_height:300，ie6会把超过300px的都给隐藏掉，所以还得把overflow改回原来的默认值。
UID232109在线时间 小时积分99帖子离线17343 天注册时间
初级会员, 积分 99, 距离下一级还需 101 积分
这个是可以自适应高度了，但是有一个问题，就是加了边线，底部的边线不显示，谁能帮助解决下
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Equal height(列高度相同的方法)&/title&
&style type=&text/css&&
#container { overflow: }
#container div {
background: #
width: 200
padding: 10
margin-bottom: -2000
padding-bottom: 2000
border: 1px solid #000000;
#container .col2 { background: # }
.clear{clear:}
&div id=&container&&
&p&当秋月刚刚露出眉毛的时候
　　她的温柔与娴静，也在我的眼窝里
　　闪了一下。露珠儿
　　在草叶间留步，像一颗宝石
　　闪烁在梦的夜晚，让我更想写诗
　　夜让我想，把皎洁的秋月
　　放在一盏路灯的高度上，刚刚适合
　　渐渐地照亮前路
　　让我刚好看清脚步和词语之间的转换
　　用清水幽幽的目光来抚慰
　　已经流落的泪滴
　　谁是最痴情的女子，一首诗的魅惑
　　就可以牵住她的一生
　　像夜色一样无穷，像月光一样无穷
　　像灵魂的飞翔一样无穷
　　也像灯下的字海一样无穷
　　从一支修好的笔中流出墨汁&/p&
&div class=&col2&&
当秋月刚刚露出眉毛的时候
　　她的温柔与娴静，也在我的眼窝里
　　闪了一下。露珠儿
　　在草叶间留步，像一颗宝石
　　闪烁在梦的夜晚，让我更想写诗
　　夜让我想，把皎洁的秋月
　　放在一盏路灯的高度上，刚刚适合
　　渐渐地照亮前路
　　让我刚好看清脚步和词语之间的转换
　　用清水幽幽的目光来抚慰
　　已经流落的泪滴
　　谁是最痴情的女子，一首诗的魅惑
　　就可以牵住她的一生
　　像夜色一样无穷，像月光一样无穷
　　像灵魂的飞翔一样无穷
　　也像灯下的字海一样无穷
　　从一支修好的笔中流出墨汁
　　与我精心的疏通有关
　　那些流失的脚印，又让我重新记起
　　但是也让我害怕迷失
　　所以我想，有一盏如月的路灯　&/p&
&p&当秋月刚刚露出眉毛的时候
　　她的温柔与娴静，也在我的眼窝里
　　闪了一下。露珠儿
　　在草叶间留步，像一颗宝石
　　闪烁在梦的夜晚，让我更想写诗
　　夜让我想，把皎洁的秋月
　　放在一盏路灯的高度上，刚刚适合
　　渐渐地照亮前路
　　让我刚好看清脚步和词语之间的转换
　　用清水幽幽的目光来抚慰
　　已经流落的泪滴
　　谁是最痴情的女子，一首诗的魅惑
　　就可以牵住她的一生
　　像夜色一样无穷，像月光一样无穷
　　像灵魂的飞翔一样无穷
　　也像灯下的字海一样无穷
　　从一支修好的笔中流出墨汁
　　与我精心的疏通有关
　　那些流失的脚印，又让我重新记起
　　但是也让我害怕迷失
　　所以我想，有一盏如月的路灯
　　有温情、明朗与洁净的眼睛
　　把自己看清
　　尽量地放低自己，目光柔和
　　能与花朵默契，也能大胆地袒露
　　真实痛过的伤疤&/p&
&p class=&clear&&返回&a href=&& title=&三叶草的博客&&三叶草的博客&/a&&/p&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 dc8p 于
04:15 编辑 ]
UID446934在线时间 小时积分463帖子离线17343 天注册时间
中级会员, 积分 463, 距离下一级还需 37 积分
原帖由 [i]dc8p 于
04:14 发表
这个是可以自适应高度了，但是有一个问题，就是加了边线，底部的边线不显示，谁能帮助解决下
Equal height(列高度相同的方法)
& && &#container { overflow: }
& && &#container div {
有详细说明
Powered bycss布局时父级不设置高度,高度由随内容增加自适应高度.什么意思?-css高度随内容自适应的问题。高度随内容变化。
没有你要的？请搜索……
你现在正在浏览：
css布局时父级不设置高度,高度由随内容增加自适应高度.什么意思?
css布局时父级不设置高度,高度由随内容增加自适应高度.什么意思?
设置好了高度多省心呀
当然可以设置固定高度啦&&#47。&这是内容;div&当然这得看你实际情况。。，;&#47。;p&&lt，，超过200PX的内容时;&lt，你里面的内容可以控制到固定高度，。，有时有500PX高度，有多少内容是不定的，甚至影响布局，这时候如果你上面的DIV设置固定高度200PX，，就会出现溢出;p&div&gt，有时是100PX高度
这样父级的高度同样也会随子级容器及子级内容的高度而自适应。另外如果父级没设置高度，他里面的子级内容就会随子级内容高度的增加而自动增高，内部有子级浮动的时候，这样做的好处是样式很灵活:hidden属性，修改子级内容的时候没必要再修改父级的高度，会使子级页面超出父级，需要给父级加个overflow一般父级是不设置高度的
所以，比如说，设置宽度就好一般在写页面的时候，苹果首页，除非有特殊需求，布局就会乱。不设置高度的好处很多，如果给图片这个设置高度，那如果换一张规格不同的图片，都不会设置父框的高度
改变父布局的高度改变了它的高度问题,怎么解决：
css布局时父级不设置高度,高度由随内容增加自适应高度.什么... 13
如何在高度不确定的容器下设置子div css高度为100：
一般做布局时,内容用div包裹,用left、right区分左右,用float:left float:...
CSS当父子元素均设置行高的时候,子元素的行高怎么没起作用?：
span不是块级元素 所以写那个没用 添加display:block即可
请教css高手:子容器高度占满父容器高度应该怎么做?：
.div2{height:200}.div2div{height:100%;border:1p...
两个DIV,父元素相对定位没有设置高度,子元素绝对定位高度随内容变化,此无法撑开父DIV：
撑不开 一般要是没啥太大要求就定height了
当子级div使用绝对定位,父级div高度自适应问题：
子级div使用float时父级div的高度自适应方法,...因为自适应宽高是需要以文档流布局为基础的...
div元素无法浮动从而撑开父级元素,当定义父级宽度足够时里面的元素才能够浮动显示：
1.父级div也设置浮动 &div style=&float:&& &div&&/div&...
如何制作三列div划分的布局? 用css控制高度都不做限制。：
下载文件:divsanlie.html|制作三列div布局,需要使用css样式中的float属性进行...
css,我有个div,需要给他设置一个最低高度,当超过最低高度时,高度自适应。怎么写?：
.className{ min-height:100 _height:100 } 注释:...
div高度自适应时可以不设置高度直接行高居中吗：
从逻辑方面来看,行高与div高度一样就相当于是文字主动居中于div,而不设高度的话,div是被撑开的...
也许你也感兴趣的内容