css - Div 的长度在增长。我想要一个溢出滚动条 - 但它被忽略了

Question

我有一个包含以下类的 div:

.messages_box {
    border: 1px solid #bbb;
    height: 20%;
    max-height: 20%;
    min-height: 20%;
    width: 100%;
    padding: 0; /* 10px 10px 10px ;*/
    margin-top: 5px;
    margin-left: 0px;
    background: #B0E0E6; /*powder blue */
    overflow-x: hidden;
    overflow-y: auto;
    /* try so get it not to grow */
    display: table-cell;
    display: inline-block;
    }

作为父模态对话框的子元素:

        .modal-dialog {
    background: #c1d9ff;
    border: 1px solid #3a5774;
    color: #000;
    padding: 4px;
    position: absolute;
    }

换句话说，messages_box 位于模态窗口内。当我在代码中动态添加新的 div(消息)时，div“messages_box”的长度会增加。我从来没有看到溢出滚动条。当我在 CSS 中标记高度时，我需要将 div 固定到屏幕的 20%。该页面在移动设备和台式机上运行，​​因此我不想使用像素。

有什么想法吗？我已经为此工作了太多小时，无法再思考了。谢谢。

Answer 1

要将 div 的高度设置为百分比，div 的容器需要有明确的高度。看看我的例子:JSFiddle .

.message_wrap {
    height:500px;
}
.message_box {
    border:1px solid #bbb;
    background-color: #B0E0E6;
    padding: 10px;
    width:350px;
    height:20%;
    overflow-y:scroll;
    overflow-x:hidden;
}

HTML

<div class="message_wrap">
    <div class="message_box">
        <p class="message">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
        <p class="message">Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service..</p>
        <p class="message">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
    </div>
</div>

---

另一种解决方案是将 max-height 更改为 vh 单位。即viewport-height .

height:20%; 将是 height:20vh; 它会有效地将 .message_box 设置为 20视口(viewport)高度的百分比，因此不再需要在父级上设置显式高度。