Machen Sie ein Kind Überlauf div resize seine Eltern richtig

Question

Ich habe ein Elternteil div, und zwei Kinder. Die erste ist eine Leiste (mit Tasten), die immer oben bleiben sollte. Die andere ist ein Inhalt editierbare div, und sollte erlaubt sein, die Größe mit seiner übergeordneten "Shrink Wrapping" um es zu ändern.

Die Bildlaufleiste muss in der unteren div, nicht die Eltern sein, so glaube ich nicht, dass die Einstellung overflow und resize für die Eltern akzeptabel ist.

Wenn ich einen Umrandungsradius für das Elternelement oder die untergeordneten Elemente einstelle, schneidet die Bildlaufleiste und der Größenänderungswäscher eine Ecke ab.

Ich muss auch in der Lage sein, eine Standardbreite und -höhe für das übergeordnete Element anzugeben und die Größe immer kleiner und größer zu lassen, wenn der Benutzer entscheidet.

Ich habe eine JS Geige geschaffen, mein Problem zu zeigen: https://jsfiddle.net/spikespaz/6jvu1xnd/1/

und der Code:

.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>

Wie kann ich die drei div s machen verhalten sich wie ich sie will zu?

Edit: Auch sollte ich darauf hinweisen, dass ich versuche, JS in irgendeiner Form zu vermeiden, dies zu tun. Ich würde es vorziehen, diesen Overhead nicht hinzuzufügen, wenn es anders geht.

Answer 1

Sie können diese verwenden:

.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>