-2
Inner divs müssen Größe ändern auf die äußere. Aber im Ergebnis, äußere Grenze ist kleiner als die innere Gesamthöhe. Auch Scroll Middle werden voraussichtlich die Größe ändern 100% auto bezogen auf left, right, top and bottom. Aber sie ändern ihre Größe in Bezug auf das äußere Div. Was ist das Problem hier? Und glauben Sie, dass es eine bessere Lösung für diese Implementierung gibt?CSS Dynamic Div Größe Lösung
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: 100%;
background-color: blue;
}
.window_inner {
background-color: red;
width: 100%;
height: 100%;
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: 100%;
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: 100%;
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>
Es ist ein bisschen schwer zu erraten, was ist das erwartete Ergebnis ... –
in Ihrem ersten Versuch https://stackoverflow.com/q/46989165/1427878 Sie haben sich zumindest halbwegs bemüht, zu erklären, was Sie wollen ... – CBroe
Ich denke, Sie sollten sich immer an ein Problem halten und versuchen zu verstehen, wie css Position und Größen funktionieren. Sie machen sehr grundlegende Fehler in Ihrem Code. Sie haben Ihre Elternhöhe auf 400px gesetzt und fügen dann innere divs hinzu, zwei mit einer Höhe von jeweils 20px und eins mit einer Höhe von 100%. Diese Summe ergibt 100% + 40px und daher sind Ihre inneren Blöcke mehr in der Höhe als Ihre Eltern. –