让孩子溢出div正确调整其父母

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>