Question

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

实施例：

＆＃13;

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';
  }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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

Answer 1

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

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

如果有任何孩子填满剩余高度，那么内容面板应该也填补剩余的高度。

解决此问题的一种方法是简单地在footer上切换一个类，以切换其content值。

这些孩子的深度可以是任何孩子（直接孩子或10岁嵌套级别）

在这里，我也使用相同的类来控制flex-grow元素，因为使用类比直接更改元素的样式更好，并且您可以轻松地定位任何数量或级别的元素。

Stack snippet

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;
}

选项2是进行标记更改，并在<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

Stack snippet

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;
}

Answer 2

为什么页脚会粘在底部？

问题在于您为具有弹性显示的主容器设置的固定高度。如果您只是删除该高度或将其设置为自动。由于 #main不是一个灵活的项目本身，它保留了整个高度，但由于其内容灵活，它们会崩溃到顶部。

但内容填充不占用整个空间？

它没有占据任何空间，因为现在没有问题的高度。你可以设置 min-height 到内容填充或者让它动态增长。有一次，你隐藏它所有的页脚都对齐到顶部，因为主容器不再具有固定的高度。

＆＃13;

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';
  }
}

＆＃13;

#main {
  height: auto;
  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;
  min-height:200px;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}

＆＃13;

<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>

＆＃13;

Answer 3

我认为您所谈论的问题可以通过使用CSS Grid来解决。

CSS网格布局擅长将页面划分为主要区域，或者根据HTML基元构建的控件的各个部分之间的大小，位置和图层来定义关系。

如果您希望通过使用CSS Grid了解可以做些什么。我建议您访问此link。

我希望这会有所帮助。

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

3 个答案: