根據他們的父母div高度平等地傳播div

Question

我想知道是否有辦法動態設置div的高度作爲他們父母div高度的函數。

例如，如果父div的用戶輸入是100px，並且內部有4個div，則每個div將獲得25px的高度。

我想動態地做這件事，並確保divs遍佈其父母的div高度（我試着用JS做這件事，但因爲沒有這樣的事情'像素的一小部分' - div高度在某些情況下不會對應父母的高度）

Answer 1

這是你所期待的嗎？

.parent { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #ff0000; 
 
    float: left; 
 
    display: block; 
 
    border: solid 1px #ff0000; 
 
} 
 
.parent .child { 
 
    height: 50%; 
 
    width: 50%; 
 
    background: #00ff00; 
 
    float: left; 
 
    display: block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

下面是該 snippet的的jsfiddle。

Answer 2

命題1號

有一種方法，這裏的jsFiddle和方法如下：

HTML：

<div class="parent"> 
    <div class="fourth"></div> 
    <div class="fourth"></div> 
    <div class="fourth"></div> 
    <div class="fourth"></div> 
</div> 

和CSS：

.parent { 
    width:100px; 
    height:100px; 
} 

.fourth { 
    width:100%; 
    height: auto; 
    padding-bottom: 25%; 
    background: red; 
} 

然而，這是有限的，因爲你沒有l onger可以在這些元素中使用填充（如果您希望這樣做）加上div的高度必須等於其寬度，因爲兒童的高度是根據寬度計算的。

命題2號

使用tables。這裏的jsFiddle

HTML：

<table class="parent"> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
</table> 

和CSS：

.parent { 
    width:100px; 
    height:200px; 
    background: #aaa; 
} 

.fourth { 
    background: red; 
} 

在這種情況下，你的內容將是自動，整個父DIV的整個高度均勻分佈。

除此之外，JS soltion是你可以使用的，但你需要監視你自己的變化，如果它們被做出並且調用某種更新方法。

Answer 3

這是一個如何，你可以使用jQuery

JSFiddle

var parent_height = $('.parent').height(); 
$('.parent div').height(parent_height/4); 

$('#parent-div-height').keyup(function(event) { 
    value = $(this).val(); 

    $('.parent div').height(value/4); 
}); 

Answer 4

解決這個問題的一個例子，你可以使用table佈局display:table和display:table-row爲children

.parent { 
 
    display:table; 
 
    height:100px; 
 
    border-collapse: collapse; 
 
    margin:20px; 
 
} 
 
.parent .child { 
 
    display: table-row; 
 
    border:1px solid green; 
 
}

<div class="parent"> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
</div>

Answer 5

可以在JavaScript中完成並且是動態的。 http://jsfiddle.net/xfx2r741/1/

function setHeightSubs() { 

    var giveHeight = document.getElementById('main').offsetHeight; 
    var subs = document.getElementsByClassName('sub'); 
    var subsheight = giveHeight/subs.length; 

    for (i=0; i<subs.length; i++) { 
      subs[i].style.height = subsheight + "px"; 
    } 

} 

setHeightSubs();