Question

我正在尝试实现一个基本的“文本编辑器”设计，其中我在可滚动div中显示一些文本，类似于iframe行为。对于任何视口/设备/分辨率，我需要div始终填充视口高度的95％，因此在显示大量文本时需要滚动。

然而，在我目前的尝试中，整个页面都是滚动的，而不仅仅是灰色的div。全文正确显示在白色div中，但灰色div应垂直滚动而不是增长：https://jsfiddle.net/aq9Laaew/18086/

.container, body, html{
  height: 95%;
}

#dWell1 {
  height: 100%;
  padding: 1rem;
  overflow-y: auto;
  background-color: grey;
}

#dText1 {
  height: 100%;
  background: white;
}

HTML：

<div class="container">

 <div class="row">
    <div class="col-md-12">
      <h3>
        Lorem ipsum
      </h3>
    </div>
  </div>

  <div class="row" style="height: 95%;">
    <div class="col-md-12">
      <div class="card" id="dWell1">
        <div id="dText1"></div>
      </div>
    </div>

  </div>
</div>

Answer 1

删除＃dText1上的100％height属性：

#dText1 {
  background: white;
}

Answer 2

这是工作的jsfiddle演示： -

https://jsfiddle.net/aq9Laaew/18112/

#dWell1 {
  height: 100%;
  padding: 1rem;
  overflow-y: hidden;
  background-color: grey;
}

#dText1 {
  height: 100%;
  background: white;
  overflow-y: auto;
}

Bootstrap div溢出父级

2 个答案: