父母div不与流浪的孩子一起成长 [英] Parent div not growing with floated children
问题描述
我有一个问题，我的浮动子div不能与我的父div一起成长.有没有办法解决这个问题?我需要包装是任一div中内容的100％.这是html;
I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;
<body>
<div id="wrapper">
<div id="leftpane">
<div id="lefthead">
<div id="leftheadfiller">
</div>
<div id="leftheadlogo">
</div>
<div id="leftheaddivider">
</div>
</div>
<div id="leftcontent">
</div>
</div>
<div id="rightpane">
<div id="righthead">
<div id="rightheadfiller">
</div>
<div id="rightheadlogo">
</div>
<div id="rightheaddivider">
</div>
</div>
<div id="navigation">
Properties Careers About Blog Advertise Contact
</div>
<div id="rightcontent">
</div>
</div>
<div id="close">
</div>
</div>
</body>
这是CSS；
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
background-color: aqua;
height: 100%;
width: 866px;
margin-left: auto;
margin-right: auto;
}
#leftpane {
background-image: url('images/darkbackground.gif');
width: 326px;
height: 100%;
float: left;
}
#lefthead {
height: 132px;
width: 100%;
}
#leftheadfiller {
height: 75px;
width: 100%;
}
#leftheadlogo {
background-image: url('images/index_07.gif');
width: 71px;
height: 56px;
float: right;
}
#leftheaddivider {
height: 1px;
width: 100%;
background-image: url('images/lightbackground.gif');
float: right;
}
#lefttcontent {
height: 100%;
background-color: fuchsia;
}
#rightpane {
background-image: url('images/lightbackground.gif');
width: 540px;
height: 100%;
float: right;
}
#righthead {
height: 132px;
width: 100%;
}
#rightheadfiller {
height: 75px;
width: 100%;
}
#rightheadlogo {
background-image:url('images/index_09.gif');
width: 109px;
height: 56px;
float: right;
}
#rightheaddivider {
height: 1px;
width: 100%;
background-image: url('images/darkbackground.gif');
float: right;
}
#navigation {
margin-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #A3A3A3;
font-size: 14px;
word-spacing: 44px;
text-align: center;
width: 100%;
height: 18px;
}
#rightcontent {
padding-left: 6px;
background-color: fuchsia;
}
#close {
clear: both;
}
是否可以解决此问题?我在本地服务器上的一个临时文件夹中进行了设置:
Is there a way to fix this? I have this set up on a temporary folder on my local server at:
我需要强制包装器增长的两个div是Leftcontent和Rightcontent.
The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.
谢谢！
推荐答案
向父div元素添加 overflow:隐藏.
如果您不想隐藏溢出的内容，请尝试以下操作:
If you don't want the overflowing content to be hidden, then try this:
将其插入包装器div中的最后一个div.
Insert this as the last div inside the wrapper div.
<div style="clear: both"></div>
这篇关于父母div不与流浪的孩子一起成长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
