Question

我的网页非常简单。

我的css cod：

#bodyPart {
clear : both;
width : 1100px;
min-height : 500px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px 1px;
border-color : white;
}

#left {
float : left;
width : 790px;
margin-left : 10px;
background-color : green;
}

#right {
float : left;
width : 280px;
margin-left : 10px;
background-color : darkgreen;
}

Html：

<div id ="bodyPart">
    <div id ="left"></div>
    <div id ="right"></div> 
</div>

min-height属性不包括填充，边框或边距！但是当“离开”的时间越来越长时，我怎么能把更长的“bodyPart”：S：S 有没有解决方案：S

Answer 1

首先，min-height与填充或边距或边框无关，其次，当父元素的大小增加时，您可以使每个元素更长（当然，高度）。

为此你必须使用百分比高度。让我们这样说：

div {
  min-height: 90%;
}

这样，这个div将填充父级的90%（如果没有其他容器，则为body。）

另外，我无法理解div与彼此之间的关系。所以很难判断。但您可以使用百分比填充父div的空间。这样，当浏览器调整大小时，元素将调整大小并填充空间。

我猜你的情况是，left是一个孩子而bodyPart是父母（意味着左边是父母）。为此，您需要JS获取子项的高度，然后设置父项的高度。如果你的代码中有某种滚动，那么删除它们，当孩子得到一些时，父母一定会获得更多的高度！

div {
 overflow-x: none; // for the parent
}

告诉我更多:)所以我可以帮助你。

Answer 2

将height的{{1}}与#bodyPart一起制作成auto

min-height

然后添加一个div来清除

HTML

#bodyPart {
clear : both;
width : 1100px;
min-height : 500px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px 1px;
border-color : white;
height:auto;
}

CSS

 <div id ="bodyPart">
    <div id ="left"></div>
    <div id ="right"></div> 
    <div class="clear"></div>
 </div>

我如何使用'float：left'的最小高度？

2 个答案: