html - div 不限制自己在父级内

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 的 25%分区取而代之的是整个页面高度的 25%。有什么想法吗？

这是 fiddle链接

Answer 1

没有 overflow: display 这样的东西。该值不存在 ( MDN )。

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

更多细节在这里:

• > Working with the CSS height property and percentage values

• Chrome / Safari not filling 100% height of flex parent

• revised fiddle demo

---

更新(基于评论中的反馈):

在您的实时网站上，试试这个:

• 从 .content 中移除 height: 100%。 (height: 100% on .content plus 导航栏高度超过 100% 会导致溢出。)
• 使 .content 成为 flex 容器:给它 display: flex 和 flex-direction: column。这将使所有 .myrow 元素成为 flex 元素。
• 从 .myrow flex 元素中移除 height: 8.33%。这已经没有必要了。只需给 .myrow 一个 flex: 1 规则。这会将容器高度平均分配给 12 个元素。
• 最后，将min-height: 0 添加到.myrow。这会覆盖 flex 元素的默认 min-height: auto，防止它们缩小超过其内容的大小 (details)。