Css 带有3列的粘性页眉/页脚。在列中滚动的div
我这里有一把JS小提琴 基本上，我正在尝试制作一个具有粘性页眉和页脚的UI。中间的内容将有三列。每列中都有div。这些div应该有100%的高度，并且不能从页脚上切掉。在DIV中，它们将具有可滚动的DIV 我创建的非常基本的布局中有这个Css 带有3列的粘性页眉/页脚。在列中滚动的div,css,Css,我这里有一把JS小提琴 基本上，我正在尝试制作一个具有粘性页眉和页脚的UI。中间的内容将有三列。每列中都有div。这些div应该有100%的高度，并且不能从页脚上切掉。在DIV中，它们将具有可滚动的DIV 我创建的非常基本的布局中有这个 d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br&
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<结束！！
它说这是结束的部分！！永远无法到达。注意：请参阅全屏小提琴 您可以尝试使用flexbox而不是定义每个单位，计算高度以避免使用页脚所在的空间，并让子div继承其高度
主体，头{溢出：隐藏；}
#页眉，#页脚，#内容{位置：绝对；右：0；左：0；}
#标题{
高度：100px；顶部：0；背景：#4A4A4A；
}
#页脚{
高度：100px；底部：0；背景：#4A4A4A；
}
#内容{
顶部：100px；
高度：计算（100%-100px）；
背景：#fff；
显示器：flex；
对齐项目：拉伸；
}
标题
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
结束了！！
中间的
正确的
页脚
主体，头{溢出：隐藏；}
#页眉，#页脚，#内容{位置：绝对；右：0；左：0；}
#标题{
高度：100px；顶部：0；背景：#4A4A4A；
}
#页脚{
高度：100px；底部：0；背景：#4A4A4A；
}
#内容{
顶部：100px；
高度：计算（100%-100px）；
背景：#fff；
显示器：flex；
对齐项目：拉伸；
}
标题
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
d
结束了！！
中间的
正确的
页脚
*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
身体{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
标题{
高度：75px；
背景：红色；
}
主要{
弹性：1；
背景：浅绿色；
显示器：flex；
}
.卷轴{
弹性：1033%；
溢出y：自动；
}
.内容{
高度：1000px；
}
页脚{
高度：50px；
背景：蓝色；
}您可以使用flexbox而无需计算高度
*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
身体{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
标题{
高度：75px；
背景：红色；
}
主要{
弹性：1；
背景：浅绿色；
显示器：flex；
}
.卷轴{
弹性：1033%；
溢出y：自动；
}
.内容{
高度：1000px；
}
页脚{
高度：50px；
背景：蓝色；
}