-2
內的div需要調整大小有關到外。但結果，外層div的邊框比內部件總高度小。此外滾動中段預計調整100％自動有關left, right, top and bottom。但他們正在調整與外部股利有關的調整。這裏有什麼問題？你認爲這個實現有更好的解決方案嗎？CSS動態事業部尺寸的解決方案
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>
這是一個有點難以猜測有什麼預期的結果... –
在你第一次嘗試https://stackoverflow.com/q/46989165/1427878你至少中途作出了努力解釋你想要什麼的...... – CBroe
我想你應該堅持一個問題，在同一時間，並試圖瞭解CSS的位置和大小是如何工作的。你在代碼中犯了非常基本的錯誤。你已經將父母高度設置爲400px，然後你添加內部div，兩個高度爲20px，一個高度爲100％。這個總數將會達到100％+ 40px，因此你的內部塊的高度比你的父母高。 –