Javascript 用css组织html结构 标题：固定在屏幕顶部 sideNav：半固定位置，可根据自身内容大小滚动 主显示：半固定位置，可根据自身内容大小滚动 页脚：固定在底部

sideNav和Main并排显示

半固定：通常在屏幕中，它是固定的，但当其内容到达末尾时（如果sideNav/mainDisplay的可滚动内容较大），则只有页脚部分会在屏幕底部向上

只有HTML、CSS和JS是最好的。有可能实现半固定的想法吗？任何帮助

*{
边际：0px；
填充：0px；
}
标题，
第节，
页脚，
在一边
导航，
文章
hgroup{
显示：块；
}
身体{
文本对齐：居中；
}
：根{
--导航宽度：100px；
}
#标题{
边际：0px；
填充：10px；
背景：#6A1B9A；
颜色：蓝色；
位置：固定；
宽度：100%；
高度：20px；
}
#页脚{
边际：0px；
填充：10px；
背景#D500F9；
底部：0；
}
#侧导航{
位置：固定；
左：0px；
顶部：40px；
文本对齐：居中；
高度：计算（100vh-40px）；
宽度：var（--navMenuWidth）；
溢出：自动；
列表样式类型：无；
背景：线性梯度（#ec7014，#081d58）；
浮动：左；
}
.主显示器{
宽度：计算值（100%-var（--navMenuWidth））；
显示：内联块；
}

这是标题


项目1










图标菜单
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
这是页脚

所做的更改：

1） 为页脚添加

position:fixed  //to fix it at bottom
width:100%      //to display div with 100% width

2） 对于主显示器：

从侧导航和主显示中删除了动态宽度组件，并添加了位置：相对于侧导航。所以现在主显示器也相应地改变了

增加了侧导航的固定宽度

更新：

小提琴：

---

注意：避免使用calc。它会导致每次鼠标移动时出现Calclulation，从而导致浏览器紧张。

感谢大家抽出时间。我是这样做的

：根目录{
--导航宽度：200px；
--人头高度：50px；
}
*{
边际：0px；
填充：0px；
边界：0px；
文本对齐：居中；
}
身体{
显示：内联块；
}
#标题{
宽度：100vw；
高度：var（--人头高度）；
背景：rgb（18643214）
}
#侧导航{
溢出：自动；
宽度：var（--navMenuWidth）；
高度：计算（100vh-var（-headerHeight））；
浮动：左；
}
梅努特姆先生{
高度：100px；
}
#主显示器{
溢出：自动；
宽度：计算值（100vw-var（--navMenuWidth））；
高度：计算（100vh-var（-headerHeight））；
}
#页脚{
背景：rgba（66212,74,0.904）；
}

这是标题


项目1














文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本