Как я могу разделить высоту div между тремя другими div?

117
13

У меня есть три div внутри другого div, и мне нужно разделить высоту родительского div между тремя дочерними элементами.

Код HTML:

    <div class="frameright">
<div class="divright">
<table class="right" id="andamento">
<caption style="text-align:left">Em Andamento()</caption>
<thead>
<tr>
<th>Chamado</th>
<th>Atividade</th>
<th>Titulo</th>
<th>Inicio</th>
<th>Hora</th>
<th>tempo</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="divright">
<table class="right" id="aberto">
<caption style="text-align:left">Aberto()</caption>
<thead>
<tr>
<th>Chamado</th>
<th>Atividade</th>
<th>Titulo</th>
<th>Abertura</th>
<th>Previsão</th>
<th>Dias</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="divright">
<table class="right" id="encerrado">
<caption style="text-align:left">Encerrado()</caption>
<thead>
<tr>
<th>Chamado</th>
<th>Atividade</th>
<th>Titulo</th>
<th>Inicio</th>
<th>Hora</th>
<th>Conclusão</th>
<th>Hora</th>
<th>Tempo</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>

И CSS:

    html{margin:1px;}
body{font-size:70%;margin: 0px;}
p{font-size:medium;}
html,body{font-family:Verdana, Geneva, Tahoma, sans-serif;overflow:hidden;height:98%;}

table{border-spacing: 1px;}
table thead tr th{width:2%;background: #2F75B5;font-weight: normal;padding: 2px 3px;color:#FFFFD4;}
table tbody tr td{z-index:0;background-color:#DDEBF7;min-width:1%;}

table.right{margin: 5px 0 0 0;max-height: 33%;}
table.right tbody td:hover {background-color:#79B7E7}
table.right tbody tr:hover td{background-color: #79B7E7}

.blue{background-color: #79B7E7}
.red{background:#F08080;font-weight:normal;}
.green{background-color:#60CA8F;font-weight:normal;}

.number{text-align:right;}

Я хочу разделить высоту поровну между этими тремя элементами div. Кто-нибудь может мне помочь?

спросил(а) 2021-01-25T11:46:56+03:00 4 месяца, 2 недели назад
1
Решение
62

Прежде всего дайте вашему parent div некоторую высоту, как

 .frameright{
height: some_value;
}

Затем разделите его среди всех ваших child divs divs как процентное соотношение, которое составляет 33.3% в вашем случае

.divright{
height:33.3%;
}

ответил(а) 2021-01-25T11:46:56+03:00 4 месяца, 2 недели назад
63

Предполагая, что родительский div должен быть высотой окна, вы можете добавить следующее в свой CSS:

.frameright{ height: 100%; }
.divright{ height:33.3%; }

ответил(а) 2021-01-25T11:46:56+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема