在内部 div 中设置最大高度不起作用 [重复]答案

【问题标题】：Set max-height in inner div does not work [duplicate]在内部 div 中设置最大高度不起作用 [重复]
【发布时间】：2018-09-17 07:41:12
【问题描述】：

我有一个完全居中的 div (itemSoldOutView)。在这个 div 里面还有另一个 div (itemSoldOutViewContent)，它的最大高度应该是父 div 的 90%。这样，如果内容太多，它就会滚动（注意：只有内部的 CONTENT-div 应该滚动）。但这不起作用。如何正确设置高度？

这是我的代码 (JSFIDDLE)：

#shadow { 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background: darkgray;
    z-index:2;
}

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    max-height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#itemSoldOutViewContent {
    overflow: auto;
  max-height: 90%;
}

#itemSoldOutViewCancel {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: red;
}

<div id="shadow">
    <div id="itemSoldOutView">
        <div id="itemSoldOutViewTitle">
            <div id="itemSoldOutViewCancel"></div>
            <h3>This is the title text:</h3>
        </div>
        <div id="itemSoldOutViewContent">
            // much content
        </div>
    </div>
</div>

【问题讨论】：

实际上它正在工作，但是您没有考虑到内部 DIV 不是从其父 DIV 的顶部开始的事实，它从更下方开始，因为标题文本.所以你真正想要内部 DIV 做的是占据 90% 的高度 - 标题文本的计算高度，加上内部 DIV 上方涉及的任何填充/边距。

标签： html css

【解决方案1】：

如果你想要一个可滚动的 div，只需将 overflow:scroll 放在 CSS 中。这里的错误是把overflow属性放在#itemSoldOutView

里面

也继承父元素的高度。

看到这个fiddle

【讨论】：

如果您查看其他两个答案，您会发现您的答案完全相同。其他两个答案都不能解决我的问题，就像我在下面的 cmets 中向他们的作者解释的那样。不过还是谢谢你的努力。
我刚刚意识到您也将父布局的高度从最大高度更改为仅高度。它只能以这种方式工作。是否有任何解决方案也适用于最大高度？

【解决方案2】：

您需要将容器div中的max-height替换为height并添加overflow: hidden

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    overflow: hidden;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

然后在要滚动的 div 中添加overflow-y: scroll

working fiddle

另一个编辑：

其实你应该把内部的div 缩小一点来显示所有可滚动的项目，这里我把max-height 减少到了80%：

#shadow { 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background: darkgray;
    z-index:2;
}

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    overflow: hidden;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#itemSoldOutViewContent {
    overflow-y: scroll;
    max-height: 80%;
}

#itemSoldOutViewCancel {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: red;
}

<div id="shadow">
    <div id="itemSoldOutView">
        <div id="itemSoldOutViewTitle">
            <div id="itemSoldOutViewCancel"></div>
            <h3>This is the title text:</h3>
        </div>
        <div id="itemSoldOutViewContent">
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            last blabla
        </div>
    </div>
</div>

【讨论】：

其实没有。我希望内容可以在内部 div 中滚动。
@progNewbie 更正了答案，将hidden 更改为auto
我不希望整个视图滚动。只是内部的 Content-div ;) 所以，标题仍然没有滚动。
@progNewbie 感谢您在我努力为您提供上述解决方案时投反对票：D，更新了答案，这是您想要的吗？

【解决方案3】：

在css中你可以使用

#itemSoldOutView{
   box-sizing: border-box;
}
#itemSoldOutViewTitle h3{
   position: fixed;
}

但是当您的内容超过 div 的容量时，内容将不断溢出。如果您想摆脱它，请使用

#itemSoldOutView{
   box-sizing: border-box;
   overflow: scroll;
}
#itemSoldOutViewTitle h3{
   position: fixed;
}

【讨论】：

这也不能解决我的问题。看看我的 cmets 在另一个答案。
使用溢出：滚动；作为 div 的 CSS 属性而不是主体
你显然没有在其他答案下方阅读我的 cmets。
为此您需要将
的 css 属性设置为 position: fixed;
这并不能解决我的问题。这只会破坏整个布局。

的 css 属性设置为 position: fixed;