&div&左&/div&&div&右&/div&问题：如何能让左边的DIV随着右边内容的高度自动调整为两DIV一样的高度。_百度知道
&div&左&/div&&div&右&/div&问题：如何能让左边的DIV随着右边内容的高度自动调整为两DIV一样的高度。
宽度的话比较好弄。高度的话比较麻烦，我想不到css的方法，希望高手来看看。但是如果不是div，用table的话，同一行里的td的高度是以这一行中最高的td为为准的，不知道你用不用得上。
其他类似问题
按默认排序
其他1条回答
不好意思上次给的是用Jquery做的， 没给你Jquery文件，下面是用JS做的 可以直接实现效果，修改右边红色div的高度 可以改变左边黑色div的高度，望采纳：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&&html xmlns=&&&&head&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&&script language=&JavaScript& type=&text/javascript&&function aaa(){var a=document.getElementById('bb');var aa=document.getElementById('ha');var b=a.style.aa.style.height=b;}&/script&&title&无标题文档&/title&&style type=&text/css&&&!--#ha { width: 100 float: background-color: #000000;}#bb { width: 100 float: background-color: #FF0000;}--&&/style&&/head&&body onload=&aaa()&&&div id=&ha&&左&/div&&div id=&bb& style=&height:50px&&右&/div&&/body&&/html&
div的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁让两个Div并排显示 - 奧義之舞 - ITeye技术网站
博客分类：
一、使用display的inline属性
&div style="width:300 height: float: display:inline"&AAAA&/div&
&div style="width:300 height: float: display:inline"&BBBB&/div&
二、通过设置float来让Div并排显示
#left,#right
{float:border:1
padding:10}
id= "main "&
id= "left "& 1111 &/div&
id= "right "& 2222 &br& 2222 &br& 2222 &/div&
&!-- 如果不用clear屬性可能會出現瀏覽器不兼容問題,clear設這元素周圍沒有浮動元素 --&
style="clear:both"&&/div&
三、对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面
1、将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百
2、 使用position:absolute。代码如下。
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ position: top:0; left:0; width:200 height:100%; background-color:#CCCCCC}
#right{ margin-left:200 height:100%; background-color:#0099FF}
&div id="left"&left&/div&
&div id="right"&right&/div&
这段代码主要涉及到以下两点点比较重要的：
（1）兼容firefox实现div高度100%；
（2）div绝对定位的妙用；在页面布局的时候，position:absolute如果灵活的应用，可以达到很好的效果。
3、 使用float解决div左右布局，左为绝对宽度，右为相对宽度问题
&style type="text/css"&
body{ margin:0; height:100% }
html{ height:100% }
#left{ width:150 height:100%; float: _margin-right:-3 background-color: yellow }
#main{ height:100%; background-color: green }
&div id="left"&&/div&
&div id="main"&&/div&
4、代码如下。方法3可能没有按照题目要求，但是可以达到一样的页面效果。主要是使用了div的float属性。
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ width:200 height:100%; background-color:#CCCCCC; float:left}
#main{ width:100%; height:100%; background-color:#0099FF}
&div id="main"&
&div id="left"&left&/div&
浏览 22934
浏览: 69591 次
来自: 北京
option = option.replaceAll(mapj ...
技巧关键在于•代表一个原点字符
就算不是我写的 也是我试验过行的 才放上去的而且所有不是我写的 ...
我想请问一下 这句话 “在webapp文件夹下的所有应用共享c ...
有木有楼主自己写的div如何实现左右两个panel并排，而且高度一致 - 陈希章 - 博客园
&%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %&
&!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 runat="server"&
&title&&/title&
&script src="jquery-1.3.2-vsdoc.js"&&/script&
&script type="text/javascript"&
$(function() {
var div1 = $("#left");
var div2 = $("#right");
var h = GetMaxHeight(div1, div2);
div1.css("height", h);
div2.css("height", h);
function GetMaxHeight(div1, div2) {
var h1 = $(div1).attr("offsetHeight");
var h2 = $(div2).attr("offsetHeight");
return Math.max(h1, h2);
&form id="form1" runat="server"&
&div id="list" style="border: solid 1px #999;"&
&div id="left" style="border: 1 float: width: 100 overflow:"&
这是左侧的内容这是左侧的内容这是左侧的内容
&div id="right" style="margin-left: 110 border: 1px solid #000;"&
这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容
&div style="clear:" title="该标签用于清除浮动，使left和right的父标签能自适应高度！"&
通过一个特殊的div,将其style设置为clear为both即可。这样上面的两个div就不可能浮动超出下面这个div。关于这个属性，可以参考这篇文章&而关于高度相同，目前据我所知，一般都是通过javascript来强制干预。需要注意的是，我们需要读取offsetHeight属性。 &欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> div覆盖div,出现div与div盒子之间产生重叠覆盖现象，而内容没有出现覆盖重叠现象原因与解决方法。DIVCSS5通过图文案例介绍产生原因与解决方法。与DIV覆盖原因与解决方法。
可能您遇到过上下结构的布局，下面DIV内容重叠上面DIV内容上，也可能下面内容覆盖掉上面，形成DIV与DIV覆盖重叠现象；您也可能遇到过相邻的两个DIV盒子发生重叠覆盖现象，这些是什么问题如何解决？
接下来DIVCSS5通过案例来演示这两种兼容性DIV覆盖重叠现象问题，并解释原因与解决方法。
一、上下结构DIV盒子覆盖
1、首先网站实例代码
&!DOCTYPE&html&&&DIVCSS5实例&DIV与DIV覆盖&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&.boxa,.boxb{&margin:0&&width:400}&.boxa-l{&float:&:280&height:80&border:1px&solid&#F00}&.boxa-r{&float:&width:100&:80&border:1px&solid&#F00}&.boxb{&:1px&solid�&height:40&:#999}&&&&&class=&boxa&&&class=&boxa-l&内容左&&class=&boxa-r&内容右&&&class=&boxb&boxb盒子里的内容&&&
可拷贝代码自己动手发现DIV覆盖现象。
实例代码说明：
设置两个大分别为&.boxa&和&.boxb&，设置相同均为400px,对&.boxb&设置一个黑色边框与高为40px、为黑色的；然后在boxa里添加两个一个靠左一个靠右CSS命名分别为&.boxa-l&&.boxa-r&，两个小盒子，同时设置红色、为80px、宽度分别为280px和100px。
2、实例效果截图
代码在中，效果浏览器截图
3、问题分析
一般想需要将&.boxa&和&.boxb&布局是上下结构，从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果，但&.boxb&这个DIV跑到&.boxa&下面去了，但内容没有发生覆盖，只有DIV发生覆盖现象。
这个原因是因为第一个大盒子里的子级使用了属性而产生了浮动，所以导致&.boxa&没有被，而同级的&.boxb&盒子与&.boxa&紧贴，而&.boxa&高度没有，&.boxa&的浮动的与&.boxb&不是同级，&.boxb&盒子依然认为&.boxa&没有高度，所以导致&.boxb&DIV盒子就跑到&.boxa&子级DIV盒子下面形成了覆盖重叠现象。
4、问题解决方法
要么清除浮动，要么设置&.boxa&高度，一般情况下文字内容不确定多少 就不能设置固定的高度，所以一般不能设置&.boxa&高度(当然能确定内容多高，这种情况下&.boxa&是可以设置一个高度即可解决覆盖问题。)。
这里就使用方法解决上下结构DIV重叠覆盖问题，清除浮动有两种方法，方法如下。
4-1：清除浮动
在&.boxa&盒子&/div&闭合前加清除浮动。
&!DOCTYPE&html&&&DIVCSS5实例&DIV与DIV覆盖&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&.boxa,.boxb{&margin:0&&width:400}&.boxa-l{&float:&width:280&height:80&border:1px&solid&#F00}&.boxa-r{&float:&width:100&height:80&border:1px&solid&#F00}&.boxb{&border:1px&solid�&height:40&background:#999}&.clear{&clear:both}&&&&&class=&boxa&&&class=&boxa-l&内容左&&class=&boxa-r&内容右&&class=&clear&&&&class=&boxb&boxb盒子里的内容&&&
使用clear样式清除浮动
相关CSS教程文章：
4-2：清除浮动
此方法与上一方法更为简便简单，只需对&.boxa&（子级有浮动的父级盒子加）
实例代码如下：
&!DOCTYPE&html&&&DIVCSS5实例&DIV与DIV覆盖&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&.boxa{&overflow:hidden}&.boxa,.boxb{&margin:0&&width:400}&.boxa-l{&float:&width:280&height:80&border:1px&solid&#F00}&.boxa-r{&float:&width:100&height:80&border:1px&solid&#F00}&.boxb{&border:1px&solid�&height:40&background:#999}&&&&&class=&boxa&&&class=&boxa-l&内容左&&class=&boxa-r&内容右&&&class=&boxb&boxb盒子里的内容&&&
案例效果截图
加css overflow样式解决div重叠覆盖问题
相关CSS教程：
二、相邻两个DIV重叠覆盖
这种新手出现这种问题比较多，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动，这样照成两个DIV覆盖重叠现象。
1、出问题完整代码
&!DOCTYPE&html&&&DIVCSS5实例&DIV与DIV覆盖&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&.aa{&float:&border:1px&solidō&background:#FFF;height:50}&.bb{&border:1px&solid&#F00;background:#CCC;&height:80px}&&&&&class=&aa&我是aa里内容&&class=&bb&我是BB里内容&&&
介绍代码：设置两个盒子使用分别为&.aa&和&.bb&，一个设置float:left一个设置没有设置，一个设置背景为白色,一个设置背景颜色为灰色，一个高度设置50px，一个设置高度为80px，一个边框为黑色，一个边框为红色。
2、案例效果截图
DIV与DIV覆盖案例截图
3、问题分析
从上图或浏览器测试案例可以看出，&.aa&对应DIV盒子浮动覆盖在&.bb&对应DIV盒子之上，但内容没有覆盖，这是因为&.aa&对应DIV盒子使用了浮动，而同级&.bb&对应DIV盒子没有使用浮动，一个使用浮动一个没有导致DIV不是在同个&平面&上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。
4、解决方法
要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置样式。
比如这里&.aa&对应盒子会固定宽度为300这个使用对&.bb&对应盒子设置:302px（大于300即可，自己测试设置需要的值）实现不重叠覆盖现象。这个解决方法自己在此案例基础上进行设置即可，针对DIVCSS5的VIP会员，可以随时问DIVCSS5，DIVCSS5将给予更详细讲解与介绍。
相关CSS教程：
5、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 17:53
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台两个div，一个固定宽度，另一个如何占满剩余部分宽度
两个div，一个固定宽度，另一个如何占满剩余部分宽度
&div id=&leftPart& style=&border:1float:width:200&&左边&/div& &div id=&rightPart& style=&border:1float:margin-left:5&&右边&/div&
如何实现上面两个div并排且右边的div能占据剩余部分宽度！
昵称: s1ihome &时间:
昵称: dlxycjxy &时间:
昵称: writeidea &时间:
昵称: liuyunshuai &时间:
昵称: liuyunshuai &时间:
昵称: maomidog &时间:
zoom触发ie的haslayout。同3#所用的height overflow针对firefox
其实方法有很多的。
昵称: ONEBOYS &时间:
你在left和right外围套一个div不就ok了。
昵称: longjianghu &时间:
昵称: frankhy200 &时间:
昵称: ONEBOYS &时间:
昵称: kinglvfen &时间:
这样能自适应宽度, 而且右边内容多了还不会跑去左边
[ 本帖最后由 stu66 于
17:54 编辑 ]
昵称: stu66 &时间: