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＆＃34; messages_box＆＃34;长度增长。我从来没有看到溢出滚动条。当我在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％，因此不再需要在父级上设置显式高度

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

1 个答案: