Question

我有一个完全居中的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>

Answer 1

您需要在容器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>

Answer 2

如果你想要一个可滚动的div，只需将http.get(`http://localhost:3000/${depairport}`) .then(data => airportNav(data)) .catch(err => console.log(err)); var number1 = 1.0; var number2 = 2.0; var airportNav = function calculateDepNav(depNav){ number1 = depNav.lat; number2 = depNav.lon; return number1, number2; } console.log(number1, number2);放在CSS中。这里的错误是将溢出属性放在overflow:scroll

中

还从父元素继承高度。

请参阅此fiddle

Answer 3

在css中你可以使用

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

但是因为你的内容比div的容量更多，所以内容会不断溢出。如果你想摆脱它，那么使用

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

在内部div中设置max-height不起作用

3 个答案: