对不起，我的英语不太好。
实际上我有这个HTML/CSS项目。实际上，当表格高度增加时，主div将扩展，但我希望.main div停止以保持“header main footer”结构不变，并具有相同的视口高度。尽管“max-height：100 vh”在身体上，视口将增加他的高度。
HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prova stupida</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
Header
</header>
<div class="main">
<div class="tableContainer">
<table cellspacing="0">
<thead>
<tr><th>Ciao</th><th>come</th><th>va</th><th>?</th></tr>
</thead>
<tbody>
<!-- Other tables value omitted for brevity -->
<tr><td>Bene</td><td>grazie</td><td>a te</td><td>?</td></tr>
</tbody>
</table>
</div>
</div>
<footer>
Footer
</footer>
</body>
</html>CSS：
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
max-height: 100vh;
}
header, footer {
background-color: #35393C;
padding: 20px;
text-transform: uppercase;
color: white;
font-size: 24px;
}
.main {
background-color: #42858C;
flex-grow: 1;
padding: 20px;
}
table {
font-size: large;
}
table td {
background-color: #397367;
border: 1px solid black;
padding: 10px 5px;
}
table th {
background-color: #5DA399;
padding: 10px 5px;
}JSFiddle link
How I want it to be seen，带有可滚动的.tableContainer div
谢谢大家
3条答案
按热度按时间brtdzjyr1#
你可以把这个css添加到tableContainer中：
我已经把200px，但你可以选择你想要的高度，它将始终在这个大小，无论内容的大小。
width属性会将滚动条放在内容旁边。
7z5jn7bk2#
这会给予你你想要的东西：
我们需要给予“table container”一个高度，但是我们不能给它一个固定的高度。所以我计算了常量高度（header + footer + padding*2的主容器= 174px），并从视口高度中减去它，并将剩余的高度分配给“table container”。
vpfxa7rd3#
应用一些高度和溢出-y：自动转换为.tableContainer
.tableContainer{ overflow-y: auto; height: calc(100vh - here apply height of header+footer) }