一组 div 的动态 div 高度

Posted 2023-03-06

【中文标题】一组 div 的动态 div 高度

【英文标题】：Dynamic div height for set of divs

【发布时间】：2016-09-15 20:11:46

【问题描述】：

我有一个父 div 和两个孩子。我希望孩子的身高保持在父母身高的 75% 和 25% 不变。

我遇到的问题是我需要父级具有由背景图像设置的高度。也就是说，它应该响应收缩，但始终呈现图像的相同区域。

这是一个行为图：

子 A 包含文本。老实说，只要显示文本，我不在乎孩子 A 有多高。我需要子 B 来保持它的高度与父级的比例及其在父级 div 底部的位置。

我想知道这个问题是否有合理的纯 css 解决方案。

【问题讨论】：

我不知道是否可以根据背景图像的高度设置容器的高度，但是对于子 A 和 B 的比例，您可以使用 flexbox..

The issue I have is that I need the parent to have a height set by a background image. 这将是您的主要问题。不可能根据背景图像更改元素的尺寸。它正在以相反的方式工作。您可以通过将实际的 <img> 作为背景来规避这一点。像这样的问题应该包含您对解决方案的尝试，在问题中包含一些 CSS 和 html。

目前还不清楚您是否需要 纯 css 解决方案来解决此问题 或者 javascript 和 jquery 解决方案是否可以接受，因为您已将这些标签添加到您的发布。

我更喜欢“纯”的 css 解决方案，但如果没有其他合理的选择，我会选择 javascript。

【参考方案1】：

此问题已解决here

div 
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */

    position:relative;

将这些样式添加到子“div”

一个 div=>

width:100%;height:75%;background-color: lightblue;position:absolute; top:0; bottom:0; left:0

B div=>

width:100%;height:25%;background-color: green;position:absolute; top:75%; bottom:0; left:0; right:0;

【讨论】：

有点用。但我仍然必须将我的内容浮在填充之上。这与让 标记设置高度并绝对放置内容不是或多或少相同吗？

在 div 里面使用这个

【参考方案2】：

这里我有一个 jquery 解决方案。

var h=$('#parentId').innerHeight;
$('#childA').css('height',h*(75/100)+'px');
$('#childB').css('height',h*(25/100)+'px');

使用 innerHeight 方法你可以得到任何元素的高度。

【讨论】：

这需要#parentId 实际上有一个高度。问题是 #parentId 仅使用背景并没有得到高度。硬编码固定尺寸消除了动态高度的灵活性。

【参考方案3】：

我认为你有很多选择：

如果您使用 AngularJS，您可以将内部 div 的高度和宽度设置为 $scope 变量。然后，当父 div 更改大小（您可以在其上触发事件）时，您会更新这些变量的值。例如：

<div style="height:Inner_Div_Top_Height>
   ...
</div>

在你的控制器中：

$scope.Inner_Div_Top_Height = <calculated height based on parent div's height> ;

较低的 div 也是如此。

另一方面，如果您不使用 Angular，则需要手动更改元素的样式（内部 div）。例如：

document.getElementById("Inner_Upper_Div").style.height = <calculated height based on parent div's height> ;

希望我正确理解了您的问题。