内部div不遵守外部div的css最大高度

cgvd09ve 于 2023-04-23 发布在其他

关注(0)|答案(7)|浏览(157)

bounty还有2天到期。回答此问题可获得+50声望奖励。Pierre Fischer希望引起更多关注此问题。

我有三个div：

灰色的div是定义高度的外部div
绿色的div是一个div，它允许滚动
红色的div，表示内容

下面的代码示例是我创建的一个最小示例，用于复制我的问题。

.outside {
    max-height: 500px;

    background-color: gray;
}

.inside {
    overflow-y: scroll;
    height: 100%;

    background-color: green;
    margin-right: 100px;
}

.content {
    height: 2000px;

    background-color: red;
    margin-right: 100px;
}

<html>
    <body style="overflow-y: hidden">
        <div class="outside">
            <div class="inside">
                <div class="content"></div>
            </div>
        </div>
    </body>
</html>

虽然灰色div的max-height为500px，但绿色div的height为红色div的height，并且不会滚动内部的内容。
将height: 100%设置为灰色div时，滚动效果与预期一样，适用于大于灰色div高度的内容。如果内容（红色div）较小，我希望绿色div仅为其内容的高度。

css

来源：https://stackoverflow.com/questions/76024933/inner-div-does-not-respect-css-max-height-of-outer-div

7条答案

按热度按时间

ct2axkht1#

有几种方法可以做到这一点（如前所述）。在某些情况下，在移动的设备上使用viewport height可能会有问题。不要使用vh，将灰色容器转换为flex对象。

.outside {
    max-height: 500px;
    background-color: gray;
    /* make it a flex container */
    display: flex;
    flex-direction: column;
}

.inside {
    overflow-y: scroll;
    height: 100%;
    background-color: green;
    margin-right: 100px;
}

.content {
    height: 2000px;
    background-color: red;
    margin-right: 100px;
    /* make scrolling more obvious */
    background: repeating-linear-gradient(
    -55deg,
    #ff0000,
    #ff0000 10px,
    #cc0c0c 10px,
    #cc0c0c 20px
    );
}

<html>
    <body>
        <div class="outside">
            <div class="inside">
                <div class="content"></div>
            </div>
        </div>
    </body>
</html>

小提琴：https://jsfiddle.net/0fhga6vt/

赞(0）回复(0）举报 2023-04-23

brqmpdu12#

你需要的这一行是溢出：hidden;当你给予你顽固的内部div溢出的那一刻：hidden，它会切断多余的部分。
您还应该将内部div的高度设置为100%，这意味着它不应该超过父div的最大高度。

赞(0）回复(0）举报 2023-04-23

gzjq41n43#

为了让内部div（height: 100%）工作，父.outside元素也必须有一个固定的高度。不幸的是，max-height不工作，因为它不是一个固定的高度。我建议根据视口高度添加一个合理的高度。max-height将确保它不大于500 px，.inside元素将开始工作，正如你所期望的。

.outside {
    height: 70vh; /* this is the only thing I changed */
    max-height: 500px;
    background-color: gray;
}

.inside {
    overflow-y: scroll;
    height: 100%;

    background-color: green;
    margin-right: 100px;
}

.content {
    height: 2000px;

    background-color: red;
    margin-right: 100px;
}

<html>
    <body style="overflow-y: hidden">
        <div class="outside">
            <div class="inside">
                <div class="content"></div>
            </div>
        </div>
    </body>
</html>

赞(0）回复(0）举报 2023-04-23

qxgroojn4#

由于在outside div中只有inside div，如果对inside div使用flex: 1的flex box列，内部div将采用其父级的高度，而不会溢出。
这样滚动就可以正常工作，如果内容没有溢出，outside div将缩小到content div的高度。

您可以随意使用不同的内容高度进行测试，如果有任何不清楚的地方，请在评论中询问。

.outside {
    max-height: 500px;
    /* Change */
    display: flex;
    flex-direction: column;
    /* Change */
    background-color: gray;
}

.inside {
    overflow-y: scroll;
    /* Change */
    /* with flex: 1; and the only child div of 'outside'
    is the 'inside' div, then the inside would 
    take the full height of its parent without the need to 
    put a fixed height to the parent div 'outside' */ 
    flex: 1;
    /* Change */
    background-color: green;
    margin-right: 100px;
}

.content {
    height: 2000px;

    background-color: red;
    margin-right: 100px;
}

<html>
    <body style="overflow-y: hidden">
        <div class="outside">
            <div class="inside">
                <div class="content"></div>
            </div>
        </div>
    </body>
</html>

赞(0）回复(0）举报 2023-04-23

rryofs0p5#

你可以将父容器设置为显示为flex，并使用flex-grow属性使绿色div扩展以填充剩余空间。下面是一个示例代码：

.outside {
    max-height: 500px;
    background-color: gray;
    display: flex;
}

.inside {
    overflow-y: scroll;
    background-color: green;
    margin-right: 100px;
    flex-grow: 1;
}

.content {
    height: 2000px;
    background-color: red;
    margin-right: 100px;
}

<body style="overflow-y: hidden">
    <div class="outside">
        <div class="inside">
            <div class="content"></div>
        </div>
    </div>
</body>

使用此代码，当内容小于灰色div的高度时，绿色div将扩展以填充剩余的空间，并且当它更大时，它将滚动内部的内容。

赞(0）回复(0）举报 2023-04-23

zrfyljdw6#

一个优雅的grid + fit-content解决方案：

.outside {
  background-color: gray;
  /* 👇 */
  display: grid;
  grid-auto-rows: fit-content(500px);
}

.inside {
  overflow-y: scroll;
  background-color: green;
  margin-right: 100px;
}

.content {
  height: 2000px;
  background: linear-gradient(to bottom, red, blue);
  margin-right: 100px;
}

<div class="outside">
  <div class="inside">
    <div class="content"></div>
  </div>
</div>

***P.S.*如果您还想适应窗口高度：

*{
  margin: 0;
}

.outside {
  background-color: gray;
  /* 👇 */
  display: grid;
  grid-auto-rows: fit-content( min(500px, 100vh) );
}

.inside {
  overflow-y: scroll;
  background-color: green;
  margin-right: 100px;
}

.content {
  height: 2000px;
  background: linear-gradient(to bottom, red, blue);
  margin-right: 100px;
}

<div class="outside">
  <div class="inside">
    <div class="content"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-23

tzdcorbm7#

.outside { max-height: 500px; background-color: gray; }

.inside { overflow-y: scroll; height: auto; /* Updated */ background-color: green; margin-right: 100px; }

.content { height: 2000px; background-color: red; margin-right: 100px; }

赞(0）回复(0）举报 2023-04-23

我来回答

内部div不遵守外部div的css最大高度

7条答案

相关问题

热门标签

最新问答