html - 如何设置中间 div 高度 100% 取决于使用 css 的 Div A 和 Div B？

Question

• 我试图将 Div B 的高度设置为 100%
• Div-A 和 Div-B 高度不固定
• Div-A 始终在最前面
• Div-B 总是在底部

Answer 1

为此，您可以使用 flex-direction: column。

工作示例:

var header = document.getElementsByTagName('header')[0];
var main = document.getElementsByTagName('main')[0];
var footer = document.getElementsByTagName('footer')[0];
var input = document.getElementsByTagName('input')[0];

function changeHeight() {
var newHeight = document.getElementsByTagName('input')[0].value;

header.style.flex = '1 0 ' + newHeight + 'px';
footer.style.flex = '1 0 ' + newHeight + 'px';
main.style.height= 'calc(100vh - ' + (newHeight * 2) + 'px)';
}

input.addEventListener('change', changeHeight, false);

body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}

header, footer {
flex: 1 0 100px;
color: rgb(255, 255, 255);
background-color: rgb(127, 127, 127);
}

header h2, footer h2 {
margin: 0;
padding: 0;
}

main {
height: calc(100vh - 200px);
overflow: hidden;
}

header, footer, main {
text-align: center;
}

input {
width: 50px;
margin: 24px;
}

<header><h2>Header</h2></header>

<main>
<p>You can vertically resize the <strong>Header</strong> and the <strong>Footer</strong>.</p>

<form>
<fieldset>
<legend>Resize height of Header and Footer</legend>
<input type="number" value="100" step="10" min="60" />
</fieldset>
</form>
</main>

<footer><h2>Footer</h2></footer>