html - css 填充剩余高度，仅当 child 需要时

Question

我有一个内容面板和一个页脚面板。页脚具有固定大小，但内容可以固定或填充剩余高度，具体取决于(大)子元素。如果任何 child 填充剩余高度，则内容面板也应填充剩余高度。这种填充 child 的深度可以是任何(直接 child 或 10 个嵌套级别)

例子:

var button = document.getElementById('child-switcher');
var child = document.getElementById('content-filler');
button.onclick = function() {
	if (child.style.display === 'none') {
  	child.style.display = null;
  } else {
  	child.style.display = 'none';
  }
}

#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}

<div id="main">
<button id="child-switcher">
  Hide/show the child
</button>
<div id="content">
  <div id="some-nested-content">
    <div id="content-header">
      CONTENT_HEADER
    </div>
    <div id="content-filler">
      FILLING REMAINING HEIGHT
    </div>
    <div id="content-footer">
      CONTENT_FOOTER
    </div>
  </div>
</div>
<div id="footer">FOOTER</div>
</div>

在示例中，如果您按下一个按钮，FOOTER 将停留在底部，但它应该上升。

PS使用flexbox不是必须的，它可以是任何布局，这样可以达到预期的效果。

Answer 1

In the example, if you press a button, FOOTER stays at the bottom, but it should go up.

当您移除(设置为display: none;) flex 元素content-filler时，content仍会填充剩余空间及其 flex: 1，并将 footer 保持在底部。

If any child fills remaining height, then the content panel should also fill remaining height.

解决该问题的一种方法是简单地在 content 上切换一个类，即切换其 flex-grow 值。

The depth of such filling childs can be any (immediate childs or 10 nested levels)

在这里，我还使用了相同的类来控制 content-filler 元素，因为用类来控制比直接更改元素的样式要好，而且您可以轻松地定位任何数字或元素的层次。

堆栈片段

var button = document.getElementById('child-switcher');
var parent = document.getElementById('content');
button.onclick = function() {
  parent.classList.toggle('collapse');
}

#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#content.collapse {
  flex: 0 1 auto;                           /*  added  */
}
#content.collapse #content-filler {
  display: none;                            /*  added  */
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}

<div id="main">
  <button id="child-switcher">
  Hide/show the child
  </button>
  <div id="content">
    <div id="some-nested-content">
      <div id="content-header">
        CONTENT_HEADER
      </div>
      <div id="content-filler">
        FILLING REMAINING HEIGHT
      </div>
      <div id="content-footer">
        CONTENT_FOOTER
      </div>
    </div>
  </div>
  <div id="footer">FOOTER</div>
</div>

---

选项 2 是更改标记，将 footer 移到 some-nested-content 元素中

堆栈片段

var button = document.getElementById('child-switcher');
var child = document.getElementById('content-filler');
button.onclick = function() {
  if (child.style.display === 'none') {
    child.style.display = null;
  } else {
    child.style.display = 'none';
  }
}

#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}

<div id="main">
  <button id="child-switcher">
  Hide/show the child
  </button>
  <div id="content">
    <div id="some-nested-content">
      <div id="content-header">
        CONTENT_HEADER
      </div>
      <div id="content-filler">
        FILLING REMAINING HEIGHT
      </div>
      <div id="content-footer">
        CONTENT_FOOTER
      </div>

      <div id="footer">FOOTER</div>
    </div>
  </div>
</div>