div组的动态div高度

Question

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

我遇到的问题是我需要父母通过背景图像设置高度。也就是它应该相应缩小，但总是呈现图像的相同区域。

以下是行为图：

儿童A包含文字。说实话，只要文本显示，我就不在乎孩子A的高度。我需要孩子B来保持它的高度作为父母的比例及其在父母div底部的位置。

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

Answer 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;
}

将这些样式添加到子＆＃34; div＆＃34;

div =＆gt;

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

B div =＆gt;

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

Answer 2

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

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

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

Answer 3

我认为你有很多选择：

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

<key>NSAppTransportSecurity</key>
<dict>
       <!--Include to allow all connection -->   
   <key>NSAllowsArbitraryLoads</key> 
   <true/> 
</dict>

并在您的控制器中：

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

同样适用于较低的div。

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

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

希望我能正确理解你的问题。