时间戳

首页 > 解决方案 > 创造

大小稳定，但文本可滚动

html - 创造
大小稳定，但文本可滚动

问题描述

我已经在论坛中搜索过，但我无法找到解决我的问题的方法。我想创建两个具有稳定高度和内部滚动的“div”。但是当我在其中一个中添加一些文本时，高度会随之增加。我想要的是“body”仍然被窃取，只有“div”内的内容是可滚动的，我希望最终结果如下图所示，但它也应该是响应式的 在此处输入图像描述

其实我的html是：

 <div id="bodyapp"  class="container-fluid">
    <div class="row">
        <div class="col-md-9 no-float">
            <div class="box content">
                Content
            </div>
        </div>
        <div class="col-md no-float">
            <div class="box">Navigation</div>
        </div>
    </div>
</div>

广告我的CSS是：

#bodyapp
 {
    display:table;
    width: 100%;
    box-sizing: border-box;
    height: 80%;
 }

#bodyapp .row
 {
    height: 80%;
 }

#bodyapp .row .no-float
 {
    display: table-cell;
    float: none;
    background-color: darkgray;
    margin:7px;
  }

谢谢

标签： htmlcss

解决方案

这是一个工作示例的小提琴：https ://jsfiddle.net/8u6032eq/1/

基本上，您想在具有文本的 < div > 上设置一个显式高度（在这种情况下.box）

您还应该将其添加到以下 CSS 声明中：

#bodyapp .row .no-float {
    overflow: scroll;
}

推荐阅读