css - 在网格中格式化 div 高度

Question

我有这个link to my jsfiddle code

我正在尝试将网格的列格式化为在两侧具有相同的高度，并且其他网格在下方正确排列。在此示例中，半列包含更多信息(高度不同)。我希望另一半具有相同的高度。这可以实现吗？

谢谢，代码如下:

 <style>
 #page {
    width:95%;
    text-align:center;
    margin:auto;
}
#row {
    height:100%
}
#header {
    width:100%;
    background-color: rgb(0, 143, 213);
    height:50px;
}
#full {
    width:99%;
    margin:0.5%;
    background-color:blue;
}
#half {
    width:48%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:yellow;
    height: 50%;
}
#third {
    width:32.333%;
    float:left;
    margin:0.5%;
    background-color:blue;
}
#quarter {
    width:23%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:blue;
    height:200px
}
</style>

<div id="page">
<div id="full">FULL</div>
<div id="half">
    <h1>Half</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div id="half">
    <h1>Half</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="third">Third</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="quarter">Quarter</div>
<div id="row">
    <div id="half">Half
        <br>test</div>
    <div id="quarter">Quarter</div>
    <div id="quarter">Quarter</div>
</div>

Answer 1

我不确定这会如何影响您的整体样式，但是为您的 #half div 分配固定的像素高度而不是百分比会强制它们具有相同的高度。

#half {
    width:48%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:yellow;
    height: 300px;
}

更新

我挖得更深一点，发现

"The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block." Source

基本上，您有 2 个选择。

1) 正如我最初的建议，分配一个固定的像素高度而不是百分比。
2) 为#page div 分配一个固定的像素高度。您的 #half div 现在可以使用百分比，它将基于 #page div 进行测量。例如:

#page {
    width:95%;
    text-align:center;
    margin:auto;
    height:1000px
}
#half {
    width:48%;
    margin:0.5%;
    padding:0.5%;
    float:left;
    background-color:yellow;
    height: 50%;
}

将导致您的 #half div 为 ~500px(不包括 margin 和 padding) 505px。额外的 5 个像素是 0.5% padding，它也是根据 #page 高度计算的。