响应式开发中设置banner display:none连带导航栏消失如何解决

解决方案 #

1. 修正媒体查询中的选择器，直接选中.banner容器设置隐藏，不要误选到header下的其他元素：

@media (max-width: 500px){
    /* 原有其他样式保持不变 */
    .banner {
        display: none;
    }
}

2. 避免导航栏塌陷，给导航栏设置最小高度，保证隐藏banner后导航栏仍能正常撑起父容器高度：

.navbar {
    min-height: 60px; /* 可根据你的实际导航高度调整数值 */
}

问题原因说明 #

• 之前隐藏banner时连带父元素消失，大概率是选择器书写错误，误将导航栏相关元素也匹配到了隐藏规则中，或者header完全依赖banner元素撑起高度，banner移除后父容器高度塌陷。
• visibility: hidden仅控制元素可见性，元素仍会保留原有文档流占位，所以会留下空白；display: none会将元素完全从文档流中移除，不会占用空间，只要选择器正确就可以实现预期效果。

内容的提问来源于stack exchange，提问作者Shabih-ul-Hassan Raza