如何根据父高度CSS子元素高度?

Question

我已经通过使用flex方法知道解决方案，但这对我没有帮助。所以给我一个替代解决方案。

我希望子div 的高度与父div 相同，我该如何实现？

网页代码：

<div style="float: left;width: 100%;border-bottom: 1px solid #000;position:  relative;">
<div style="float: left;width: 10%;border-right: 1px solid #000;height: 100%;">
<p style="font-size: 18px;padding: 2px;margin: 0">Customer</p>
</div>
<div style="float: left;width: 89.7%;height: 100%;">
<p style="font-size: 18px;padding: 2px;padding-left: 5px;margin: 0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

Answer 1

您遇到的问题将在此 css 技巧页面的"大崩溃"部分进一步解释，当元素具有任何浮动样式时，父元素将为 0 高度，如果它是唯一的孩子，一旦从子div 中删除浮点，高度：100% 应该工作。

浮动样式还有其他一些副作用，这通常导致我避免使用它们，flex 样式和绝对/相对定位元素通常可以实现所需的 UI 效果，除了在带有 WYSWIG 的文章中定位图像。

Answer 2

您可以定位左侧div 绝对值(将右侧div 向右浮动，并在与(示例中为 10%(添加相同的左边距：

<div style="float: left;width: 100%;border-bottom: 1px solid #000;position:  relative;">
<div style="width: 10%;border-right: 1px solid #000;height: 100%;position: absolute; top: 0; left: 0;">
<p style="font-size: 18px;padding: 2px;margin: 0">Customer</p>
</div>
<div style="float: right;width: 89.7%;height: 100%;margin-left: 10%;">
<p style="font-size: 18px;padding: 2px;padding-left: 5px;margin: 0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

唯一的缺点是，如果左 dif 中的文本使其高于左div，它将溢出其父级......

Answer 3

有很多方法可以解决这个问题。

你用jQuery的方式：

$(document).ready(function(){
var parent_height = $('#parent-div').height();

$('#child-div-01').height(parent_height);

});

#parent-div{float: left;width: 100%;border-bottom: 1px solid #000;position:  relative;}
#child-div-01{float: left;width: 10%;border-right: 1px solid #000;height: 100%;}
#child-div-01 p.para-1{font-size: 18px;padding: 2px;margin: 0}
#child-div-02{float: left;width: 89.7%;height: 100%;}
#child-div-02 p.para-2{font-size: 18px;padding: 2px;padding-left: 5px;margin: 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-div">
<div id="child-div-01">
<p class="para-1">Customer</p>
</div>
<div id="child-div-02">
<p class="para-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

代码笔链接

第二种完全CSS的方式(不使用FlexBox(：

#parent-div{position: relative; overflow: hidden; border-bottom: 1px solid #000;}
.child{display: table-cell; vertical-align: top;}
.child-left{width: 15%; height: 100%; border-right: 1px solid #000;}
.child-right{width: 100%; height: 100%; padding-left: 10px;}

<div id="parent-div">
<div class="child child-left">
<p>Customer</p>
</div>
<div class="child child-right">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

代码笔链接