我希望彼此之间有两个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。
答案 0 :(得分：1)
您可以使用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>。
这种美感也是旧版浏览器的后备，它们可以获得很好的整页滚动。
string fooWeb = "web";
string fooDesktop = "desktop";
string fooMac = "mac";
string fooIphone = "iphone";
string fooAndroid = "android";
list<string> Names = new List<string>();
Names.Add("web");
Names.Add("mac");
Names.Add("iphone");
Names.Add("android");
foreach (var item in this._repo.FooRepo())
if (!(item.SystemName == "Web" || item.SystemName == "android" || item.SystemName == "mac"))
{
//add to new list
}
}