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

Question

我有一个完全居中的div（itemSoldOutView）。在这个div中还有另一个div（itemSoldOutViewContent），它的最大高度应该是父div的90%。因此，如果内容太多，它就会滚动（注意：只有内部内容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>

Answer 1

在css中，您可以使用

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

但由于您的内容超过了div的容量，因此内容将不断溢出。如果你想摆脱它，那么使用

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

Answer 2

您需要在container div中将最大高度替换为高度，并添加溢出：隐藏

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

然后在div中，您要滚动add（添加）overflow-y（溢出）：滚动

工作小提琴

另一个编辑：

实际上，您应该使内部div小一点以显示所有可滚动的项目，在这里我将max-高度减少到80%：

css prettyprint-override">#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>

Answer 3

如果您想要一个可滚动的div，只需在CSS中放入溢出：scroll。这里的错误是将溢出属性放在了itemSoldOutView中

还从父元素继承高度。

看到这把小提琴了吗