html滑动子级父级变化,html - 将父<div>扩展到其子级的高度

html - 将父

扩展到其子级的高度

我有一个与此类似的页面结构：

/*Content*/

/*Content*/

我想为父母width扩大width时内部div的overflow: auto;增加。

编辑：

一个问题是，如果子内容的width扩展到浏览器窗口的width之后，我当前的CSS会在父级div上放置一个水平滚动条。我希望滚动条位于页面级别。 目前我的父div设置为overflow: auto;

你能帮我解决这个问题吗？

15个解决方案

468 votes

为父母试试这个，它对我有用。

overflow:auto;

更新：

另一个有效的解决方案：

家长：

display: table;

儿童：

display: table-row;

Dr Casper Black answered 2019-02-20T00:23:00Z

23 votes

添加clear:both.假设您的列是浮动的。 根据您的身高指定父级的方式，您可能需要溢出：auto;

bendewey answered 2019-02-20T00:23:25Z

14 votes

正如Jens在评论中所说

另一个答案是如何使div不大于其内容？...和它   建议设置display：inline-block。 这对我很有用。 -    Jens Jun 2于5:41

在所有浏览器中，这对我来说效果更好。

noisy answered 2019-02-20T00:24:03Z

4 votes

对于那些在这个答案的指示中无法弄清楚这一点的人：

尝试将填充值设置为大于0，如果子div具有margin-top或margin-bottom，则可以用padding替换它

例如，如果你有

#childRightCol

{

margin-top: 30px;

}

#childLeftCol

{

margin-bottom: 20px;

}

用以下代替它会更好：

#parent

{

padding: 30px 0px 20px 0px;

}

imy answered 2019-02-20T00:24:50Z

3 votes

加

clear:both;

对于父div的css，或者在父div的底部添加一个div，它确实清除：both;

这是正确的答案，因为溢出：auto; 可能适用于简单的Web布局，但会混淆那些开始使用负边距等内容的元素

Internet Marketing Boise answered 2019-02-20T00:25:24Z

3 votes

使用类似自清理的东西div非常适合这种情况。 那么你只需要在父母上使用一个类......就像：

Tim Knight answered 2019-02-20T00:25:49Z

1 votes

您在寻找2列CSS布局吗？

如果是这样，看一下说明，开始时非常简单。

lpfavreau answered 2019-02-20T00:26:21Z

1 votes

我通过将子div作为没有任何定位属性(如绝对指定)的单个列，使父div扩展到子div的内容。

例：

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}

#maincolumn {width:400px;}

基于maincolumn div是#wrap的最深子div，它定义了#wrap div的深度，两侧的200px填充创建了两个大的空白列，供您根据需要放置绝对定位的div。 您甚至可以使用position：absolute更改填充顶部和底部以放置标题div和页脚div。

Ian answered 2019-02-20T00:26:56Z

1 votes

尽量给父母的身高max-content。

.parent{

height: max-content;

}

[https://jsfiddle.net/FreeS/so4L83wu/5/]

Skotee answered 2019-02-20T00:27:27Z

0 votes

这样做你想要的吗？

.childRightCol, .childLeftCol

{

display: inline-block;

width: 50%;

margin: 0;

padding: 0;

vertical-align: top;

}

Eric answered 2019-02-20T00:27:52Z

0 votes

您必须在父容器上应用clearfix解决方案。 这是一篇很好的文章，解释了修复链接

Nikhil answered 2019-02-20T00:28:17Z

0 votes

如果#childRightCol和#childRightCol中的内容向左或向右浮动，只需将其添加到css：

#childRightCol:before { display: table; content: " "; }

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

#childLeftCol:before { display: table; content: " "; }

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

user3436572 answered 2019-02-20T00:28:42Z

0 votes

这是按规范描述的 - 这里的几个答案是有效的，并与以下内容一致：

如果它具有块级子级，则高度是最顶层块级子框的顶部边框边缘之间的距离，该子框没有通过它折叠的边距和最底部的块级子框的底部边缘 通过它没有边缘崩溃。 但是，如果元素具有非零顶部填充和/或顶部边框，或者是根元素，则内容从最顶层子节点的上边缘开始。 (第一种情况表示元素的顶部和底部边缘与最顶部和最底部的子边缘折叠，而在第二种情况下，填充/边框的存在阻止顶部边缘折叠。)同样，如果 element具有非零底部填充和/或底部边框，然后内容结束于最底部子项的底部边缘。

从这里：[https://www.w3.org/TR/css3-box/#blockwidth]

Adam Tolley answered 2019-02-20T00:29:22Z

-1 votes

我使用这个CSS父，它的工作原理：

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%;

pejman answered 2019-02-20T00:29:47Z

-1 votes

overflow:hidden;

overflow:hidden;

您在css中使用overflow:hidden;属性进行管理

chintan kotadiya answered 2019-02-20T00:30:23Z