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