内的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,因此你的内部块的高度比你的父母高。 –