关于html：扩展父级＆lt; div＆gt;


Expanding a parent <div> to the height of its children

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

1
2
3
4
5
6
7
8
9
10
<body>
 
   
      /*Content*/
   
   
      /*Content*/
   
 
</body>

我希望当内部div的height增加时，母公司div在height中扩大。

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

你能帮我做这个的CSS吗？

相关讨论

为父母试一试，这对我很管用。

1
overflow:auto;

更新：

另一个有效的解决方案：

起源：

1
display: table;

孩子：

1
display: table-row;
相关讨论

加一个clear:both。假设您的列是浮动的。根据指定的父级高度，可能需要溢出：auto；

1
2
3
4
5
6
7
8
9
<body>

   
   
   
   
   

</body>
相关讨论

正如Jens在评论中所说

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

在所有浏览器中，这对我来说效果都要好得多。

试着给max-content以表示父母的身高。

1
2
3
.parent{
   height: max-content;
}

https://jsfiddle.net/frees/so4l83wu/5/

相关讨论

对于那些无法在本答案的说明中找到答案的人：

尝试将填充值设置为大于0，如果子分隔符具有上边距或下边距，则可以将其替换为填充。

例如，如果你有

1
2
3
4
5
6
7
8
#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

最好换成：

4

添加

1
clear:both;

到父DIV的CSS中，或者在父DIV的底部添加一个DIV来清除：两者都是；

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

使用类似于自动清除的EDOCX1[1]非常适合这种情况。然后你只需要在父类上使用一个类…像：

1
 

你在找一个2列的CSS布局吗？

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

我使父DIV围绕子DIV的内容展开，方法是将子DIV作为没有任何定位属性(如绝对指定)的单个列。

例子：

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

基于主列DIV是wrap的最深子级DIV，这定义了wrap DIV的深度，并且每侧的200px填充创建两个大的空白列，供您随意放置绝对定位的DIV。甚至可以使用position:absolute更改填充顶部和底部以放置页眉和页脚分隔符。

下面的代码对我有用。

CSS

1
2
3
.parent{
    overflow: auto;
}

HTML16

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

如果您在childrightcol和childrightcol中的内容向左或向右浮动，只需将其添加到css:

1
2
3
4
#childRightCol:before { display: table; content:""; }
#childRightCol:after { display: table; content:""; clear: both; }
#childLeftCol:before { display: table; content:""; }
#childLeftCol:after { display: table; content:""; clear: both; }

这是你想要的吗？

1
2
3
4
5
6
7
8
.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

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

If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn't have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn't have margins collapsed through it. However, if the element has a nonzero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a nonzero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.

从这里：https://www.w3.org/tr/css3 box/blockwidth

1
2
3
4
5
6
7
8
9
10
11
12
13
#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
1
2
3
4
5
        <p>

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
       
</p>

在css
中使用EDOCX1[2]属性进行管理

我使用此CSS作为父级，它可以工作：

1
2
3
4
5
6
7
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%;
相关讨论