Expanding a parent <div> to the height of its children
I have a page structure similar to this:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
I would like for the parent div to expand in height when the inner div 's height increases.
Edit:
One problem is that if the width of the child content expands past the width of the browser window, my current CSS puts a horizontal scrollbar on the parent div . I would like the scrollbar to be at the page level. Currently my parent div is set to overflow: auto;
Can you please help me with the CSS for this?
Try this for the parent, it worked for me.
overflow:auto;
UPDATE:
One more solution that worked:
Parent :
display: table;
Child :
display: table-row;
add a clear:both . assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
As Jens said in comment
An alternative answer is How to make div not larger than its contents?… and it proposes to set display:inline-block. Which worked great for me. – Jens Jun 2 at 5:41
This works far better for me in all browsers.
链接地址: http://www.djcxy.com/p/88282.html下一篇: 将父母<div>展开到其子女的身高