Question

我有一个带标题和内容部分的页面

 ------------------
|       Header     |
 ------------------
|                  |
|     Content      |
|                  |
|                  |
 ------------------

我在内容上使用了flex: 1 1 auto; overflow:hidden;，在标题上使用了overflow:display; flex: 0 1 auto;。这一切都很好。

接下来在内容中我创建了4个<div>，每个都有25％的高度。

<div class="content">
            <!--first row-->
            <div class="myrow">
                <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>

            <!--second row-->
            <div class="myrow">
              <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>

            <!--third row-->
            <div class="myrow">
              <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>

            <!--forth row-->
            <div class="myrow">
              <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>          
        </div>

相关的CSS

.myrow{
height:25%;
background-color: red;
align-items: center;
border-width: 1px;
border-style: solid;
}

.col{
    background-color: green;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    width: -webkit-calc(25% - 2px);
    width:    -moz-calc(25% - 2px);
    width:         calc(25% - 2px);
}

.colsolid{
    background-color: black;
    color: white;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    width: -webkit-calc(25% - 2px);
    width:    -moz-calc(25% - 2px);
    width:         calc(25% - 2px);
}

问题在于myrow不限于content div的 25％。取而代之的是整页高度的 25％。有什么想法吗？

以下是fiddle链接

Answer 1

没有overflow: display之类的东西。该值不存在（MDN）。

此外，当您为元素指定百分比高度时，Chrome和Safari要求在父元素上指定高度。 HTML结构中的多个容器缺少定义的高度，因此height: 25%元素上的.myrow可能无效。

此处有更多详情：

更新（根据评论中的反馈）：

在您的实际网站上，试试这个：

从height: 100%移除.content。（height: 100% 上的.content加上导航栏高度超过100％并导致溢出。）
将.content设为灵活容器：为其提供display: flex和flex-direction: column。这将使所有.myrow元素变为项目。
从height: 8.33%弹性项目中删除.myrow。这不再是必要的了。只需给.myrow一个flex: 1规则。这将在12个项目中平均分配容器高度。
最后，将min-height: 0添加到.myrow。这将覆盖弹性项目上的默认min-height: auto，这可以防止它们缩小超过其内容的大小（details）。

div不限制自己在父母之内

1 个答案: