标头：固定在屏幕顶部。
sideNav：半固定位置，可根据自己的内容大小滚动。
mainDisplay：半固定位置，可根据自己的内容大小滚动。
页脚：固定在底部。
sideNav和mainDisplay并排
半固定：通常在屏幕上是固定的，但是当其内容到达末尾时（在sideNav / mainDisplay的滚动内容较大的情况下），则仅页脚部分会在屏幕底部向上。
仅HTML，CSS，JS为佳。可以实施半固定的想法吗？任何帮助...
* {
margin: 0px;
padding: 0px;
}
header,
section,
footer,
aside,
nav,
article,
hgroup {
display: block;
}
body {
text-align: center;
}
:root {
--navMenuWidth: 100px;
}
#header {
margin: 0px;
padding: 10px;
background: #6A1B9A;
color: azure;
position: fixed;
width: 100%;
height: 20px;
}
#footer {
margin: 0px;
padding: 10px;
background: #D500F9;
bottom: 0;
}
#sideNav {
position: fixed;
left: 0px;
top: 40px;
text-align: center;
height: calc(100vh - 40px);
width: var(--navMenuWidth);
overflow: auto;
list-style-type: none;
background: linear-gradient(#ec7014, #081d58);
float: left;
}
.mainDisplay {
width: calc(100% - var(--navMenuWidth));
display: inline-block;
}<body>
<div id="header">This is the header</div>
<div id="mainBox">
<nav id="sideNav">
<ul>
<li class='menuItem hasSubMenu'>
<div class="subMenu">
<span class="menuLabel" title="Item 1">Item 1</span>
<span class="subMenuIcon"></span>
</div>
<ul class="subMenuList">
<li class="subMenuItem">
<a href="http://google.com">Submenu1</a>
</li>
<li class="subMenuItem">
<a href="http://google.com">Submenu2</a>
</li>
</ul>
</li>
<li class="menuItem">
<a href="#">
<span class="menuLabel" title="Item 2">Item 2</span>
</a>
</li>
</ul>
<button id="iconMenu" class="iconMenu">
<span class="iconMenuLabel" title='iconMenu'>icon menu</span>
</button>
</nav>
<div id="mainDisplay">
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
<div id="footer">This is the footer</div>
</body>最佳答案
所做的更改：
1）添加页脚
position:fixed //to fix it at bottom
width:100% //to display div with 100% width
2）对于mainDisplay：
从侧面导航和主显示中删除了动态宽度分量，并添加了相对于侧面导航的位置。因此现在主显示已相应更改。
侧面导航增加了固定宽度
更新：
小提琴：https://jsfiddle.net/6wbfukj9/25/
注意：避免使用calc。它会导致每次鼠标移动时发生计算错误，从而有效地导致浏览器紧张。