【发布时间】：2021-01-13 19:16:15
【问题描述】：
好吧，我希望这一切都有意义。
我有一个网页，无论窗口大小如何，我都希望在屏幕上显示页眉和页脚。在页眉和页脚之间，我有 2 个部分，左边的一个是可滚动的 div 部分，右边的一个是静态部分（它不会填充足够的内容而需要任何滚动。
这是我的 HTML 示例，当可滚动 div 不需要任何滚动（在全高清显示器上最大化）时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h1>header</h1>
</header>
<div id="app-page">
<div id="scrollable-section">
<div class="app-header">
<h1>App Header</h1>
</div>
<div id="scrollable-content">
<h3>Subsection 1</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<br>
</div>
</div>
<div id="static-section">
<h1>Static Header</h1>
<p>static content</p>
</div>
</div>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
这是一个相同 HTML 的示例，但有足够的“Lorem Ipsum”，可滚动的 div 将需要滚动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h1>header</h1>
</header>
<div id="app-page">
<div id="scrollable-section">
<div class="app-header">
<h1>App Header</h1>
</div>
<div id="scrollable-content">
<h3>Subsection 1</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<br>
<h3>Subsection 2</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<br>
<h3>Subsection 3</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<br>
<h3>Subsection 4</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<br>
</div>
</div>
<div id="static-section">
<h1>Static Header</h1>
<p>static content</p>
</div>
</div>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
这是 CSS：
/* Base */
html, body{
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
}
/* Header */
header{
background-color: red;
color: white;
text-align: center;
}
header h1{
margin: 0;
}
/* Page Content */
div#app-page{
height: 100%;
display: flex;
}
div#scrollable-section{
width: 100%;
height: 100%;
overflow-y: auto;
}
div.app-header{
display: flex;
justify-content: center;
margin: 25px;
}
div#scrollable-content{
border: 5px solid blue;
margin: 0 50px;
padding: 20px;
}
div#static-section{
border-left: 2px solid red;
margin-right: 0;
margin-left: auto;
padding: 20px;
}
/* Footer */
footer{
text-align: center;
margin-top: auto;
margin-bottom: 0;
padding: 10px;
color: white;
background-color: red;
}
这是我的问题：
全屏，第一个 HTML 看起来很完美。但是，当填充了足够需要滚动的内容（第二个 HTML）时，不仅可滚动 div 会出现滚动条，而且整个页面的最右侧也会出现滚动条。这是因为页脚刚好位于窗口下方，我无法再同时查看页脚和页眉。
此外，当我在第一个 HTML 上调整窗口大小时，也会发生同样的问题。
我以我的方式设置页脚的 CSS，因为在其他页面上（没有像这样的静态部分）我确实希望页面扩展，以便我可以滚动整个页面。我认为我设置这个页面的方式意味着只有可滚动的 div 会有一个滚动条，但由于某种原因，整个页面只延伸了一点点。我只想要 1 个滚动条，我需要更改什么？
【问题讨论】：