0
私は親divと2つの子を持っています。 最初は常に上に留まるバー（ボタン付き）です。 もう1つはコンテンツ編集可能な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>どのように私は私がそれらをしたいのように3つのdiv sが振る舞うことができますに？
編集：また、これを行うにはどのような形式でもJSを使用しないようにしています。私は別の方法で行うことができる場合、そのオーバーヘッドを追加しないことをお勧めします。
、それは.parent'が何であるか'を基準にする必要があります。 – spikespaz
私は答えを更新しました。 –
これは私がやっていたことではありません：https://jsfiddle.net/spikespaz/e4w3szpg/ – spikespaz