扩大父母＜div＞达到孩子的高度

偏执的太偏执、 2022-11-24 14:27 100阅读 0赞

本文翻译自：[Expanding a parent ][Expanding a parent]

[ to the height of its children][Expanding a parent]

[ *I have a page structure similar to this:* **我有一个类似于此的页面结构：** ][Expanding a parent]

[ ][Expanding a parent]

<body> <div id="parent"> <div id="childRightCol"> /*Content*/ </div> <div id="childLeftCol"> /*Content*/ </div> </div> </body>

[ ][Expanding a parent]

[ *I would like for the parent `div` to expand in `height` when the inner `div` 's `height` increases.* **我希望父`div` `height`在内部`div`的`height`增加时扩展。** ][Expanding a parent]

[ ][Expanding a parent]

[ ***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` .* **一个问题是，如果`width`子内容的扩展过去的`width`的浏览器窗口，我目前的CSS使水平滚动条上的父`div` 。** *I would like the scrollbar to be at the page level.* **我希望滚动条位于页面级别。** *Currently my parent div is set to `overflow: auto;`* **目前，我的父div设置为`overflow: auto;`** ][Expanding a parent]

[ ][Expanding a parent]

[ *Can you please help me with the CSS for this?* **您能帮我用CSS吗？** ][Expanding a parent]

### [\#1楼][Expanding a parent] ###

[参考：][Expanding a parent]

### [\#2楼][Expanding a parent] ###

[ *I use this CSS to parent and it works:* **我使用此CSS作为父项，并且可以正常工作：** ][Expanding a parent]

[ ][Expanding a parent]

min-height:350px; background:url(../images/inner/details_middle.gif) repeat-y 0 0 ; padding:5px 10px; text-align:right; overflow: hidden; position: relative; width: 100%;

### [\#3楼][Expanding a parent] ###

[ *You have to apply the clearfix solution on the parent container.* **您必须在父容器上应用clearfix解决方案。** *Here is a nice article explaining the fix*  **这是一篇很好的文章，介绍了修复** ][Expanding a parent]

### [\#4楼][Expanding a parent] ###

[ *As Jens said in comment* **正如詹斯在评论中所说** ][Expanding a parent]

[ ][Expanding a parent]

> [ ][Expanding a parent]
> 
> [ *An alternative answer is*  **一个替代答案是** *… and it proposes to set display:inline-block.* **…并建议设置display：inline-block。** *Which worked great for me.* **这对我来说很棒。** *– Jens Jun 2 at 5:41* **–詹斯6月2日5:41** ][Expanding a parent]
> 
> [ ][Expanding a parent]

[ ][Expanding a parent]

[ *This works far better for me in all browsers.* **在所有浏览器中，这对我来说都更好。** ][Expanding a parent]

### [\#5楼][Expanding a parent] ###

[ *If your content inside \#childRightCol and \#childRightCol are floated left or right, just add this into css:* **如果您在\#childRightCol和\#childRightCol中的内容向左或向右浮动，只需将其添加到CSS中：** ][Expanding a parent]

[ ][Expanding a parent]

#childRightCol:before { display: table; content: " "; } #childRightCol:after { display: table; content: " "; clear: both; } #childLeftCol:before { display: table; content: " "; } #childLeftCol:after { display: table; content: " "; clear: both; }

### [\#6楼][Expanding a parent] ###

[ *Does this do what you want?* **这是您想要的吗？** ][Expanding a parent]

[ ][Expanding a parent]

.childRightCol, .childLeftCol { display: inline-block; width: 50%; margin: 0; padding: 0; vertical-align: top; }

[Expanding a parent]: https://oldbug.net/q/1BVT/Expanding-a-parent-div-to-the-height-of-its-children