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”元素附加到文档后，“ wrapper”元素的高度会增加。

当“幻影”元素出现/消失时，我应该怎么做才能使“中间”元素的高度自动改变。 “包装器”元素的高度不应更改其自身的值。我不想为此使用Java脚本。

提前谢谢！

My fiddle

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>

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

2 个答案: