如何根据另一个DIV动态更改中央DIV的高度?

Question

我很抱歉我的英语！

起初，我有以下文档结构：

<div class="wrapper w-100">
<div class="top w-100">TOP</div>
<div id="container" class="middle w-100">MIDDLE</div>
<div class="bottom w-100">BOTTOM</div>
</div>

CSS 对应于上面的结构：

.w-100 {
width: 100%;
}
.wrapper {
background-color: #fff;
height: 420px;
}
.top {
background-color:  #DAF7A6 ;
height: 42px;
}
.middle {
background-color:  #FF5733 ;
height: calc(100% - 42px - 42px);
overflow-y: scroll;
}
.bottom {
background-color:  #C70039 ;
height: 42px;
}

它正在完美地工作。

但是现在我应该使用另一个带有"ghost"元素的结构。 它是动态呈现的，并由java-script控制：

<div class="wrapper w-100">
<div class="top w-100">TOP</div>
<div class="ghost w-100">GHOST</div>
<div id="container" class="middle w-100">MIDDLE</div>
<div class="bottom w-100">BOTTOM</div>
</div>

如果我使用旧的 CSS，则在将"ghost"元素附加到文档后，"包装器"元素的高度会增加。

我应该怎么做才能在"幽灵"元素出现/消失时自动更改"中间"元素的高度。 "包装器"元素的高度不应更改其自身的值。 我不想为此使用java脚本。

提前谢谢你！

我的小提琴

Answer 1

像这样的东西？

function gen(n) {
	container = document.getElementById('container')
	for (var i=0; i<n; ++i) {
	var div = document.createElement('div');
div.append('INNER ELEMENT # ' + i);
div.className = 'inner';
	container.appendChild(div)
}
}
function toggle() {
	var ghost = document.getElementById('ghost')
if (ghost.style.display == "none") {
ghost.style.display = "block";
} else {
ghost.style.display = "none";
}
}
function blink(s) {
toggle()
setTimeout(function(){blink(s)}, s)
}
gen(10);
blink(2000);

body {
background-color: #000;
}
.w-100 {
width: 100%;
}
.wrapper {
background-color: #fff;
display:flex;
flex-direction:column;
height: 300px;
}
.top {
background-color:  #DAF7A6 ;
height: 42px;
}
.ghost {
background-color: #FFC300;
height: 42px;
}
.middle {
background-color:  #FF5733 ;
/*height: calc(100% - 42px - 42px);*/
flex:1;
overflow-y: scroll;
}
.bottom {
background-color:  #C70039 ;
height: 42px;
}
.inner {
height: 42px;
border: 1px solid white;
margin-bottom: 1px;
}

<div class="wrapper w-100">
<div class="top w-100">TOP</div>
<div id="ghost" class="ghost w-100">GHOST</div>
<div id="container" class="middle w-100">MIDDLE</div>
<div class="bottom w-100">BOTTOM</div>
</div>

Answer 2

只有使用CSS，你才能这样做。

function gen(n) {
container = document.getElementById('container')
for (var i = 0; i < n; ++i) {
var div = document.createElement('div');
div.append('INNER ELEMENT # ' + i);
div.className = 'inner';
container.appendChild(div)
}
}
function toggle() {
var ghost = document.getElementById('ghost')
if (ghost.style.display == "none") {
ghost.style.display = "block";
} else {
ghost.style.display = "none";
}
}
function blink(s) {
toggle()
setTimeout(function() {
blink(s)
}, s)
}
gen(10);
blink(2000);

body {
background-color: #000;
}
.w-100 {
width: 100%;
overflow: hidden;
}
.wrapper {
background-color: #fff;
height: 300px;
}
.top {
background-color: #DAF7A6;
height: 42px;
}
.ghost {
position: absolute;
top: 42px;
background-color: #FFC300;
height: 42px;
z-index: 1;
}
.middle {
position: absolute;
top: 84px;
background-color: #FF5733;
height: calc(100% - 42px - 42px);
overflow-y: scroll;
margin-top: -42px;
padding-top: 42px;
}
.bottom {
background-color: #C70039;
height: 42px;
}
.inner {
height: 42px;
border: 1px solid white;
margin-bottom: 1px;
}

<div class="wrapper w-100">
<div class="top w-100">TOP</div>
<div id="ghost" class="ghost w-100">GHOST</div>
<div id="container" class="middle w-100">MIDDLE</div>
<div class="bottom w-100">BOTTOM</div>
</div>