Css 即使设置为父级的100%，子级div也会缩小

编辑：发现问题与某些元素的高度属性有关。这个问题被改写成了一个新问题。这个问题可以结束，因为这个问题有点广泛，不能准确地将问题缩小到真正的问题

---

在最新版本的Chrome和Firefox中，我遇到了一个CSS问题，我似乎无法将其隔离，任何帮助都将不胜感激

topnav区域的高度为50px。
侧导航的高度为500px。
页脚具有透明背景，高度为72像素。
总高度为622px

如果页面>622px，则侧导航绿色区域将适当地延伸内容父级黄色区域的全长

622px高的示例

如果页面大小低于622px，则sidenav会缩小，露出页面后面的内容。我不知道为什么侧导航正在缩小，因为它应该扩展父内容高度的100%

---

<强> 示例：如果您的意图是固定标题，固定边栏的菜单和页脚的可变高度，以及溢出的内容区域，都被装箱到视口中，请考虑基于Flex布局的以下代码段。 请注意，侧栏菜单当前设置为通过速记

flex:1 auto

值展开（flex-grow | flex-shrink | flex-basis）。这可以根据需要进行调整

html，
身体{
保证金：0；
填充：0；
}
#容器{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
宽度：100vw；
}
#导航{
flex:050px；
背景颜色：蓝色；
颜色：#fff；
}
#内容{
flex:1自动；
显示器：flex；
}
#侧导航{
柔性：0 250像素；
高度：计算（100vh-50px）；
显示器：flex；
弯曲方向：立柱；
}
#contentMain{
flex:1自动；
高度：计算（100vh-50px）；
背景颜色：黄色；
溢出：自动；
}
#菜单{
flex:1自动；
背景色：红色；
溢出：自动；
}
#页脚{
flex:0自动；
背景颜色：绿色；
}

顶置导航
侧导航
侧导航
侧导航
侧导航
侧导航
侧导航
侧导航
侧导航
页脚1
页脚2
页脚3
页脚4

内容
内容
内容
内容
内容
内容

正如Temani Afif在评论中所说，

#sidenav

设置为其父级

#content

的100%高度，但

#content

的高度为100%-50px。由于

#menu

的最小高度为500px，而页脚的高度约为72px，因此可以想象，对于低于622px的窗口高度，没有足够的空间容纳页脚1、页脚2、，。。。最后一个div中的元素

一种可能的解决办法：

#sidenav {
    display: flex;
    flex-direction: column;
}

#menu {
    /* min-height: 500px; */
    flex-grow: 1;
}

删除菜单的最小高度将删除溢出。现在，您只需要让它使用整个可用空间（使用flied grow:1），当然，还需要将父sidenav设置为具有列方向的flex容器

身体{
保证金：0；
}
#导航{
位置：固定；
排名：0；
右：0；
左：0；
高度：50px；
背景颜色：蓝色；
颜色：#fff；
}
#内容{
显示器：flex；
宽度：100%；
高度：计算（100vh-50px）；
边缘顶部：50px；
溢出y：自动；
背景颜色：黄色；
}
#侧导航{
显示器：flex；
弯曲方向：立柱；
宽度：250px；
身高：100%；
背景颜色：绿色；
}
#菜单{
柔性生长：1；
溢出y：滚动；
背景色：红色；
}
顶置导航
侧导航
页脚1
页脚2
页脚3
页脚4

内容

您的html实际上完全扩展到视口的100%高度，因为这里的视口是浏览器窗口，而不是内部内容

也请找到我对这个问题的答案

---

同样重要的是阅读

您只是有一个溢出，因为您将绿色区域设置为高度：父级的100%，同时也设置为高度：calc（100%-50px）如果菜单的大小超过窗口的大小，此解决方案会遇到一系列问题。见图。如果您还将菜单设置为溢出，则不会。请使用溢出菜单验证更新的代码。我希望使用sidenav或contentMain来确定内容div的最大高度，并且页脚位于sidenav的底部。用溢出来制作sidenav可变高度是我试图解决的问题的一种解决方案。我会尝试一下，稍后再给你回复，现在已经有点晚了。谢谢你的建议。最小高度为500px的原因是假设菜单很长。没有一种方法可以指示内容的高度应该是其父级的100%高度-50px。sidenav的高度是内容大小的100%？我以为这就是我在这里要做的。如果菜单增长并增加了内容的高度，那么我希望sidenav也随之增长。计算是在负载情况下进行的吗？@Rawr将高度设置为100%-50px是可以的（尽管我宁愿使用顶部边距为50px的

calc（100vh-50px）

，而忘记

位置：固定的
）。问题在于将该固定高度与菜单的最小高度相结合。它们一起设置了一个约束，所以50px+500px+72px（页脚高度）是您的窗口高度到sh的限制