Html 3剖面布局的动态高度

在具有固定高度顶部导航栏（固定宽度的侧导航栏，其中剩余空间用于内容）的布局中，如何使侧导航和内容填充剩余宽度，即使内容窗格中的内容超过视口的高度

---

将更准确地描述这种情况。您可以看到内容在

#content

div中继续。我如何才能获得它，使侧导航和内容窗格在页面的其余部分继续运行？

好的，这是一个有点老套的解决方案，但它可以工作！如果您愿意使用JS，我将提供一个没有黑客攻击的：

*{
框大小：边框框；
}
html，正文{
身高：100%；
边际：0px；
填充：0px；
}
#容器{
背景颜色：绿色；
}
#顶置导航{
高度：65px；
背景色：红色；
}
#侧导航{
宽度：200px；
浮动：左；
背景颜色：绿色；
身高：100%；
}
#内容{
背景颜色：蓝色；
显示：内联块；
宽度：计算（100%-200px）
}
div{
文本对齐：居中；
颜色：金色；
}

顶部导航
侧导航
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

您可以使用背景渐变对非常旧的方法“”进行更新：

背景：线性渐变（右侧，绿色200px，蓝色200px）其中绿色是第一个200px（作为侧边栏）上从左开始的油漆，然后蓝色接管：


#容器{
背景颜色：黄色；
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
}
#顶置导航{
高度：65px；
背景色：红色；
}
#侧导航{
宽度：200px；
位置：绝对位置；
顶部：65px；
底部：0；
背景颜色：绿色；
}
#内容{
背景颜色：蓝色；
位置：绝对位置；
顶部：65px；
底部：0；
左：200px；
右：0；
}
html，正文{
身高：100%；
边际：0px；
填充：0px；
背景：线性渐变（向右，绿色200px，蓝色200px）；
}
div{
文本对齐：居中；
颜色：金色；
}

顶部导航
侧导航
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

出于好奇，你会如何使用JS？我会得到内容的高度，并使高度等于它。如果您不想支持响应性，那么这就像是五行代码。