css填充剩余高度,仅在孩子需要时

Question

我有一个内容和页脚面板.页脚具有固定大小,但内容可以是固定的,也可以填充剩余高度,具体取决于(大)子元素.如果任何孩子填充剩余高度,则内容面板也应填充剩余高度.这些填充孩子的深度可以是任何(直接孩子或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会保持在底部,但它 应该会上升.

使用flexbox的PS不是必需的,它可以是任何布局,这将允许实现期望的结果.

Answer 1

在示例中，如果按下按钮，FOOTER 会保持在底部，但它应该上升。

当您删除（设置为display: none;）弹性项目时content-filler，content仍将用其填充剩余空间flex: 1，并将 保留footer在底部。

如果任何子项填充剩余高度，则内容面板也应填充剩余高度。

解决这个问题的一种方法是简单地切换一个类content，从而切换它的flex-grow值。

此类填充子级的深度可以是任意（直接子级或 10 个嵌套级别）

在这里，我还使用相同的类来控制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>