Question

我有一个父母div和两个孩子。第一个是一个应该始终位于顶部的条形（带按钮）。另一个是内容可编辑的div，应该允许调整它的父级“收缩包装”。

滚动条必须位于底部div，而不是父级，因此我认为不能为父级设置overflow和resize。

此外，如果我在父级或子级上设置边框半径，则滚动条和调整大小的滑块会切掉一个角。

我还需要能够为父级指定默认宽度和高度，并且如果用户决定，仍然可以调整其大小。

我创建了一个JS小提琴来显示我的问题：https://jsfiddle.net/spikespaz/6jvu1xnd/1/

代码：

.parent {
  width: 600px;
  height: 400px;
  border: solid 2px #000;
}

.bar {
  background: #000;
  height: 40px;
}

.content {
  overflow: auto;
  resize: both;
  height: 100%;
}

<div class="parent">
  <div class="bar">
  <!-- Top bar above the text entry / contenteditable div
  In practice, this will be a list with buttons. -->
  </div>
  <div class="content" contenteditable="true">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna dui, facilisis a lectus non, auctor ultrices felis. Phasellus auctor auctor sem at blandit. Ut in metus euismod, sodales diam non, pretium neque. Praesent lectus tortor, ullamcorper at gravida in, lobortis sit amet enim. Aliquam feugiat euismod ligula. Phasellus maximus nunc ut tellus mollis laoreet. Fusce id fermentum lectus.</p>
    <p>In a posuere mi, tempor laoreet elit. Sed non tristique ligula. Morbi a condimentum tellus. Vestibulum blandit, orci sed sagittis mollis, purus quam iaculis metus, quis tincidunt leo ligula sit amet magna. Donec tempor nisl diam, nec pellentesque lorem vulputate vel. In augue dui, dapibus et ipsum sed, blandit aliquam dolor. Donec non arcu non est ullamcorper lacinia. Sed egestas dictum orci, tincidunt facilisis odio aliquam nec.</p>
    <p>Duis vitae arcu gravida, vestibulum leo quis, auctor ligula. Sed eleifend mi ut neque egestas elementum. Praesent elit nisl, rutrum sit amet tellus sed, dapibus interdum nulla. Suspendisse efficitur semper ullamcorper. Ut ac viverra augue. Maecenas pharetra rhoncus nulla, et cursus leo luctus et. Ut molestie quam ex, id mattis turpis tincidunt quis. Integer cursus efficitur cursus. Etiam ullamcorper lacinia efficitur. Nunc a sem ipsum.</p>
    <p>Suspendisse dapibus massa sem, et cursus velit luctus quis. Nulla quis semper lacus. Integer fermentum odio eget ipsum luctus, sit amet suscipit sapien commodo. Vestibulum vitae finibus leo, et pretium tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu scelerisque sem. Mauris accumsan condimentum felis ac aliquam. Fusce efficitur nec mauris id pharetra. Curabitur pulvinar nulla urna, vitae tempus lorem ultricies sed. Curabitur malesuada, purus sed tempor maximus, lacus ligula auctor turpis, venenatis consequat mauris ex non nibh. Nam ac commodo leo, lacinia sagittis ligula. Phasellus non sodales est, in convallis libero. Donec nisl neque, dignissim vitae fringilla in, congue a nunc. Nulla mollis, sapien quis venenatis vulputate, ligula velit pellentesque risus, ultricies imperdiet lectus mauris vel est.</p>
    <p>Ut consequat semper nisi, sed varius sem posuere in. Donec egestas orci vitae sem bibendum congue. Pellentesque venenatis non erat egestas feugiat. Phasellus volutpat, tortor sed convallis pulvinar, sem elit suscipit erat, et commodo risus nulla vitae eros. Etiam sollicitudin ipsum ac nisi gravida, sit amet ultrices purus efficitur. Aliquam egestas ac arcu et mattis. Nulla volutpat arcu sed mattis ornare.</p>
  </div>
</div>

如何使三个div的行为与我想要的一样？

编辑另外，应该注意的是，我试图避免以任何形式使用JS来执行此操作。如果可以采用另一种方式，我宁愿不添加开销。

Answer 1

您可以使用：

  .parent {
  width: 80%;
  height : 300px;
  border: solid 2px #000;
  margin : 0 auto;
}

.bar {
  background: #000;
  height: 40px;
}

.content {
      overflow: auto;
overflow-x: hidden;
height: calc(100% - 40px);
}


<div class="parent">
  <div class="bar">
  </div>
  <div class="content" contenteditable="true">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna dui, facilisis a lectus non, auctor ultrices felis. Phasellus auctor auctor sem at blandit. Ut in metus euismod, sodales diam non, pretium neque. Praesent lectus tortor, ullamcorper at gravida in, lobortis sit amet enim. Aliquam feugiat euismod ligula. Phasellus maximus nunc ut tellus mollis laoreet. Fusce id fermentum lectus.</p>
    <p>In a posuere mi, tempor laoreet elit. Sed non tristique ligula. Morbi a condimentum tellus. Vestibulum blandit, orci sed sagittis mollis, purus quam iaculis metus, quis tincidunt leo ligula sit amet magna. Donec tempor nisl diam, nec pellentesque lorem vulputate vel. In augue dui, dapibus et ipsum sed, blandit aliquam dolor. Donec non arcu non est ullamcorper lacinia. Sed egestas dictum orci, tincidunt facilisis odio aliquam nec.</p>
    <p>Duis vitae arcu gravida, vestibulum leo quis, auctor ligula. Sed eleifend mi ut neque egestas elementum. Praesent elit nisl, rutrum sit amet tellus sed, dapibus interdum nulla. Suspendisse efficitur semper ullamcorper. Ut ac viverra augue. Maecenas pharetra rhoncus nulla, et cursus leo luctus et. Ut molestie quam ex, id mattis turpis tincidunt quis. Integer cursus efficitur cursus. Etiam ullamcorper lacinia efficitur. Nunc a sem ipsum.</p>
    <p>Suspendisse dapibus massa sem, et cursus velit luctus quis. Nulla quis semper lacus. Integer fermentum odio eget ipsum luctus, sit amet suscipit sapien commodo. Vestibulum vitae finibus leo, et pretium tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu scelerisque sem. Mauris accumsan condimentum felis ac aliquam. Fusce efficitur nec mauris id pharetra. Curabitur pulvinar nulla urna, vitae tempus lorem ultricies sed. Curabitur malesuada, purus sed tempor maximus, lacus ligula auctor turpis, venenatis consequat mauris ex non nibh. Nam ac commodo leo, lacinia sagittis ligula. Phasellus non sodales est, in convallis libero. Donec nisl neque, dignissim vitae fringilla in, congue a nunc. Nulla mollis, sapien quis venenatis vulputate, ligula velit pellentesque risus, ultricies imperdiet lectus mauris vel est.</p>
    <p>Ut consequat semper nisi, sed varius sem posuere in. Donec egestas orci vitae sem bibendum congue. Pellentesque venenatis non erat egestas feugiat. Phasellus volutpat, tortor sed convallis pulvinar, sem elit suscipit erat, et commodo risus nulla vitae eros. Etiam sollicitudin ipsum ac nisi gravida, sit amet ultrices purus efficitur. Aliquam egestas ac arcu et mattis. Nulla volutpat arcu sed mattis ornare.</p>
  </div>
</div>

让子溢出div正确调整其父级

1 个答案: