如何在三个其他div之间分享div的高度?

时间:2015-11-19 19:34:31

标签: html css html5 css3

我在另一个div中有一个三个div,我需要在三个孩子之间分享父div的高度。

HTML code:

    <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元素之间平均分享高度。有人可以帮帮我吗?

2 个答案:

答案 0 :(得分:1)

首先给你的parent div一些高度,如

 .frameright{
      height: some_value;
  }

然后在您的所有child divs中以百分比形式分享,33.3%在您的情况下

.divright{
    height:33.3%;
 }

答案 1 :(得分:1)

假设您希望父div成为窗口的高度,您可以将以下内容添加到CSS中:

timestamp         | name  |   email | revenue | Edit Url
2015-2-2 02:22:22 | David |         |         |
2015-2-2 07:22:22 | Paul  |         |         |
2015-2-2 09:22:22 | Olive |         |         |