Распространение div-высоты одинаково в зависимости от их родительской высоты div

Question

Я хотел бы знать, есть ли способ динамически установить высоту для divs как функцию их родительской высоты div.

Например, если пользовательский ввод для родительского div равен 100px и имеет 4 div внутри - каждый из divs получит высоту 25px.

Я хочу сделать это динамически и убедиться, что divs распространены по всей высоте своего родителя (я пытался сделать это с помощью JS, но так как нет такой вещи «доля пикселя» - высота div не будет соответствовать высоте родительского 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>

Вот jsfiddle этого snippet.

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

В этом случае ваши элементы будут автоматически, равномерно распределен по всей высоте ваших родительских дел.

Помимо этого 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();