Css 修复了3列布局中的可切换页脚

因此，我尝试创建一个3列布局，其中包括：

• 左面板列：可滚动的垂直菜单。默认显示，但可切换
• 右面板列：可滚动操作菜单。默认情况下隐藏，但可切换
• 内容：可滚动的内容，可根据页面的剩余内容进行调整，因此无论何时切换左、右或底部面板（见下一点），内容都不会被覆盖，div将自行调整
• 底部面板：不可滚动。默认情况下隐藏，但可切换。当显示时，它应该贴在屏幕底部并保持可见，即使我滚动content div）。这也应该和上面描述的内容面板一样宽

到目前为止，我已经能够创建一个具有Togleable right和left列的代码段，内容正在进行调整：

$（“.header\u container>.content”）.append（（）=>{
返回“header
”；
});
$（“.right\u container>.content”）.append（（）=>{
返回“右菜单项
”。重复（100）；
});
$（“.left\u container>.content”）.append（（）=>{
返回“菜单项左侧
”。重复（100）；
});
$（“.terminal\u container>.content”）.append（（）=>{
返回“终端”。重复（100）；
});
$（“.body\u container>.content”）.append（（）=>{
返回"知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不轻率，就必须为自己的行为负责。
”。重复（100）；
});
$（“.hideleft”）。单击（（）=>{
$（“.left_container”）.toggle（）；
});
$（“.hideright”）。单击（（）=>{
$（“.right_container”）.toggle（）；
})；

.container{
宽度：90%；
高度：180像素；
边框：3倍实心；
位置：绝对位置；
}
.头箱{
宽度：100%；
高度：50px；
背景色：#DDD；
}
.左(右)货柜{
身高：100%；
宽度：200px；
背景：绿色；
浮动：左；
溢出：滚动；
}
.中央集装箱{
宽度：自动；
身高：100%；
背景：红色；
溢出：滚动；
}
.右(右)货柜{
身高：100%；
宽度：200px；
背景：蓝色；
浮动：对；
溢出：滚动；
显示：无；
}
.货柜码头{
高度：200px；
溢出：隐藏；
背景色：黑色；
颜色：白色；
}
.内容{
填充：15px；
}

向左切换
向右切换

通过jQuery不带类 试试这个。我很确定

+

选择器是CSS3

$（“.header\u container>.content”）.append（（）=>{
返回“header
”；
});
$（“.right\u container>.content”）.append（（）=>{
返回“右菜单项
”。重复（100）；
});
$（“.left\u container>.content”）.append（（）=>{
返回“菜单项左侧
”。重复（100）；
});
$（“.terminal\u container>.content”）.append（（）=>{
返回“终端”。重复（100）；
});
$（“.body\u container>.content”）.append（（）=>{
返回“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不轻率，就必须为自己的行为负责。
”。重复（100）；
});
$（“.hideleft”）。单击（（）=>{
$（“.left_container”）.toggle（）；
});
$（“.hideright”）。单击（（）=>{
$（“.right_container”）.toggle（）；
});
$（“.hidebottom”）。单击（（）=>{
$（“.terminal_container”）.toggle（）；
})；

.container{
宽度：90%；
高度：180像素；
边框：3倍实心；
位置：绝对位置；
}
.头箱{
宽度：100%；
高度：50px；
背景色：#DDD；
}
.左(右)货柜{
身高：100%；
宽度：200px；
背景：绿色；
浮动：左；
溢出：滚动；
}
.中央集装箱{
宽度：自动；
身高：100%；
背景：红色；
}
.右(右)货柜{
身高：100%；
宽度：200px；
背景：蓝色；
浮动：对；
溢出：滚动；
显示：无；
}
.body_容器{
身高：100%；
溢出：滚动；
}
#底部{显示：无；}
#底部：选中+主体\容器{
身高：80%；
}
.货柜码头{
身高：20%；
溢出：隐藏；
显示：无；
背景色：黑色；
颜色：白色；
}
.内容{
填充：15px；
}

向左切换
向右切换
切换底部

我不希望使用任何jQuery，希望使用纯CSS样式使面板/内容/页脚按描述和独立运行。此外，calc解决方案是CSS3，我不希望使用它。我确实喜欢你的解决方案，如果没有纯CSS解决方案，我会投票赞成。javascript的切换很好，我不喜欢ind.对于其余内容（“响应性”内容和粘性页脚），我希望使用纯CSS进行管理。谢谢你！我现在有一些选项可以尝试。再次感谢Chris！不客气。最后一件事，你能删除任何对未来用户没有用的评论吗？谢谢，上帝保佑！