我想要两个 div 彼此下方。最上面的应该有一个高度取决于它的内容。底部应该填充窗口边框的剩余空间，如果底部内容太大，它应该是可滚动的。
我有一个可行的解决方案 https://jsfiddle.net/3cm3vvv7/1/
html, body {
height: 100%;
}
body {
padding: 0px;
margin:0px;
height:100%;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
.container {
display: block;
height: 100%;
}
.table {
display: table;
width: 100%;
height:100%;
}
.row {
display: table-row;
width: 100%;
}
.row-scrolling {
display: table-row;
width: 100%;
height: 100%;
position: relative;
}
.inner-table {
width: 100%;
height: 100%;
}
.header-cell {
display: table-cell;
padding: 5px;
height: 10%;
}
.scroll-cell {
display: table-cell;
padding: 5px;
position:relative;
height: 100%;
}
.scroll-content {
position: absolute;
top: 0px;
right:0px;
bottom: 0px;
left: 0px;
overflow-y: scroll;
height:100%;
}
<body>
<div class="table" >
<!-- Header -->
<div class="row">
<div class="header-cell">
Header<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>END
</div>
</div>
<div class="row-scrolling " style="background-color: red;">
<div class="scroll-cell" >
<!-- Use inner div's with position relative and absolute, to fix cell height,
making it overflow correctly. -->
<div class="scroll-content">
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
</div>
</div>
</div>
<!-- footer -->
</div>
</body>但它似乎只适用于 Safari/Firefox - 在 Internet Explorer 上，底部的内容被截断了。
我更喜欢只使用 HTML/CSS 而没有 JavaScript 的解决方案。
最佳答案
您可以将代码一直简化到这样，这里使用 flexbox 而不是 table。
它的美妙之处还在于它对旧浏览器的回退，它们可以获得漂亮的整页滚动。
html, body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.row-scrolling {
flex: 1;
overflow: auto;
}<div class="wrapper">
<div class="row">
Header
<br/><br/><br/>
<br/><br/><br/>
<br/>END
</div>
<div class="row-scrolling " style="background-color: red;">
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
<div>Some text</div><div>Some text</div>
</div>
</div>关于html - 顶部 DIV 大小适合内容 - 底部 DIV 滚动并使剩余空间适合窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41226486/