【css布局】左右分布的导航菜单存在二级菜单的高度设置问题

最新推荐文章于 2023-01-11 10:25:57 发布

Halcyon.

最新推荐文章于 2023-01-11 10:25:57 发布

阅读量873

点赞数

分类专栏：前端文章标签： html css flex

本文链接： https://blog.csdn.net/Hhalcyon/article/details/112859766

版权

在创建带有二级菜单的导航时，使用`height:100%`可能导致高度不贴合底部。本文探讨了四种解决方法的优缺点，并在Flex布局中找到简单高效解决方案：通过设置`align-items: stretch`使所有子元素拉伸并保持与最长子元素相同高度。在实际应用中，需考虑内容区域的默认高度并灵活调整。

摘要由CSDN通过智能技术生成

在我们写菜单的时候，经常会在css用到中用到’height:100%‘这个属性。这个属性在一级菜单中使用没有问题，从父级元素上一层层传递，渲染准确。如果有二级菜单的存在，还传递’height:100%’，可能出现菜单高度不贴合底部的情况。先上图：
在这里插入图片描述
出现这个bug的时候我在网上看了很多博客，总结的解决的方法有这几种：
1、position:absolute：定义了后发现，虽然位置上没有改变，但是设置top,bottom这些属性没有改变，就算有改变，如果内容区域过长，菜单不会随着内容区域的变长而变长
2、javascript定义min-height/height：用document.body.clientHeight()获取页面的页高，再减去header的高度。这种有个问题，如果内容区域大于clientHeight，二级菜单的高度不会随着内容区域的变长而变长。
3、margin-bottom:-9999px,pading-bottom:9999px：这个定义会使得二级菜单的‘尾巴’特别长，而不是高度随着内容区域变化
4、height:100%:文章开头说明了，在层级没有这么复杂的时候，可以用这种方法，渲染也准确，层级多的时候就会有偏差，我实际遇到的问题是二级菜单总是差一点高度和内容区域的底部齐平。并且因为层级过多，不能保证每一层都加上了’height:100%'同时