Question

我在这里读到了一些关于溢出属性的问题。这似乎很简单，但一些基本的期望并没有得到满足。

请考虑以下代码。我有一个高大的div指定为：

<div class="blue fixed-height1000">big</div>

它出现在另一个应该剪切它的div中：

<div class="cell yellow overflow-hidden fixed-height100">

但是高大的div不是剪辑。为什么呢？

我的理解是，由于父级高100像素且不允许溢出，因此高100像素的孩子不会在屏幕上显示为1000像素高。

但事实并非如此。整个1000像素都可见，导致页面滚动。

以下是我猜测为何会发生这种情况的原因：

具有overflow属性的父级是display：table-cell和overflow仅适用于display：block？
或者，父级是灵活的高度，因为它是适合页面的表的一部分，溢出只适用于固定大小？（尽管在实验中我试图在桌面上强制高度，看看我是否可以强制溢出工作）

＆＃13;

.fixed-width100 {width:100px;}
.fixed-height75 {height: 75px;}
.fixed-height1000 {height: 1000px;}
.height50percent {height: 50%;}
.height100percent {height:100%;}
.width100percent {width: 100%;}

.table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}

.overflow-hidden {overflow:hidden;}
.overflow-auto {overflow:auto;}
.overflow-scroll {overflow: scroll;}


.yellow {background-color: yellow;}
.orange {background-color: orange;}
.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}

＆＃13;

<div class="height100percent">
<!--wraps entire page into a single table that fits to page-->
  <div class="width100percent height100percent table">

    <div class="row fixed-height75 green"> top header </div>

    <div class="row">
      <div class="cell fixed-width100 orange">fixed</div>
      <div class="cell yellow overflow-hidden fixed-height100">clipped?
        <div class="blue fixed-height1000">big</div>

      </div>
      <div class="cell red">
        <div class="height50percent green">
          height 50%
        </div>
        <div class="height50percent orange">
          height 50%
        </div>
      </div>
      <div class="cell">flex. </div>
      <div class="cell fixed-width100">fixed</div>
    </div>

    <div class="row fixed-height75 green">bottom footer</div>
  </div>             
</div>

＆＃13;

Answer 1

我会说你的问题是显示：table-cell。来自w3schools： “让元素表现得像td元素。” 一个td元素调整到内容，你不能真正设置它的高度，尤其不要隐藏溢出:) 据我所知

Answer 2

尝试将大型内容放入设置为display:block;的div中，因为这会溢出，而表格单元格可能不会：

css：.block100percent {display:block; height:100%;}

<div class="cell yellow">
      <div class="block100percent overflow-auto red">
               <div class="blue fixed-height1000">big</div>
      </div>
</div>

CSS溢出似乎没有被尊重

2 个答案: