好吧，我希望这一切都有意义。
我有一个网页，无论窗口大小，我都希望页眉和页脚在屏幕上可见。在页眉和页脚之间，我有两个部分，左边的是可滚动的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个滚动条，我需要更改什么？
要使页眉和页脚始终可见，请将它们的位置设置为position: fixed;，并对页眉使用top:0;，对页脚使用bottom:0;。
如果您不想滚动整个页面，请设置body {overflow: hidden;}
然后，您可能需要将div独立地设置为overflow:scroll;。
这就是你要找的吗？我希望这能有所帮助。