为什么我的dropdown nav带有overflow: hidden阻塞页面等于导航的高度？
dropdown nav带有overflow: hidden属性会导致其内容超出部分被隐藏，从而阻塞页面等于导航的高度。这是因为overflow: hidden属性会创建一个新的块级格式化上下文（Block Formatting Context，BFC），并将其内容限制在其容器的边界内。当dropdown nav的内容超出其容器的高度时，超出部分会被隐藏，但是容器的高度仍然保持不变，导致页面布局被阻塞。
解决这个问题的方法是使用其他的布局方式，例如使用position属性将dropdown nav的位置设置为absolute或fixed，或者使用其他的overflow属性值，如overflow: visible或overflow: auto。这样可以避免创建新的BFC，使得dropdown nav的内容可以正常显示，而不会阻塞页面布局。
腾讯云相关产品中，可以使用云服务器（CVM）来进行服务器运维，云数据库（CDB）来进行数据库管理，云原生容器服务（TKE）来进行容器化部署，云安全中心（SSC）来进行网络安全管理，云点播（VOD）来进行音视频处理，人工智能平台（AI）来进行人工智能开发，物联网开发平台（IoT）来进行物联网应用开发，云存储（COS）来进行数据存储，腾讯区块链（TBaaS）来进行区块链应用开发等。具体产品介绍和链接地址可以参考腾讯云官方网站。
相关·内容
height blocking website这是在屏幕大小相当于手机的情况下工作。我真的不知道如何让这个导航的高度不会阻挡我网站的任何其他元素。例如，如果我向下滚动按钮所在的位置，由于导航的高度，即使它没有展开，我也不能单击它。 任何帮助或指点都将不胜感激。 谢谢 编辑:我添加了一张图片，以显示下拉高度是如何阻止网站的
浏览 9提问于2020-12-10得票数 0
回答已采纳
我想要一个带下拉菜单的粘乎乎的肚脐。但是下拉菜单并没有显示出来。在这里，在堆栈溢出中，我读到了有关溢出:隐藏在导航栏中导致问题的文章。删除使下拉菜单工作，但导航栏消失。->下拉列表-菜单不可见<
浏览 1提问于2019-09-12得票数 3
回答已采纳
问题
当点击汉堡包图标时，我有一个下拉菜单。当浏览器的宽度小于1300 in时，就会出现汉堡包图标。但是由于position: fixed，当用户向下滚动页面时，下拉菜单似乎不会与nav作为一个元素一起移动。因此，这两个元素之间似乎存在着差距，你可以看到它们之间的文字。我的工作一直是滚动隐藏下拉导航，如果它打开。然而，我不知道这是否是最好的方法，因为这可能会导致问题的移动。我觉得更
浏览 4提问于2017-05-09得票数 0
回答已采纳
我创建了以下JSFiddle来复制我的问题：<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"navbar-nav" style="overflow-y: hidden;">
<li class="dropdo
浏览 0提问于2014-01-15得票数 3
我试图使用css- table和纯JavaScript来隐藏和显示表行(No jQuery)。有什么想法吗？ <!-- Header -->
<header id='header'> <!id="menu-nav&qu
浏览 3提问于2014-07-22得票数 1
我的JavaScript无法获得导航对象高度的高度： <!-- code here -->导航对象的CSS对于桌面和移动具
浏览 0提问于2019-08-18得票数 1
回答已采纳
1回答
我有一个移动版的页面。内容足够用户在移动设备上滚动。单击图标时，移动导航栏从左侧滑入，body获得overflow: hidden;，因此内容不再滚动。有没有办法使导航条100%的高度窗口(而不是文档)，以便用户可以滚动在导航条进一步？目前，幻灯片和高度的导航是由Javascript控制的，但我正在寻找一个CSS解决方案。有人能帮忙吗？/
浏览 3提问于2016-03-18得票数 0
回答已采纳
2回答
我知道internet explorer和SVGs玩得不太好。我注意到，当将display: block更改为display: flex时，确实会减小间隙的大小。但是，它不会删除它。 ? 我在样式中声明了height和width，但这个问题似乎在IE11中仍然存在 // Declarations align-items: center;
display
浏览 31提问于2019-04-24得票数 0
我想在.content目录上禁用滚动功能。并且仅当.nav div溢出时才启用滚动。background:white; top:0; box-shadow:0 2px 4px grey; overflow:hidden; grid-template-columns:200px 1fr 250px; background-color:white
浏览 34提问于2019-11-17得票数 0
回答已采纳
我有一个全屏导航(最低全屏，景观它是超过100 is )。我想实现的是，如果你打开菜单，你只能在导航中滚动，但身体。我尝试过许多不同的方法，但都没有成功。我甚至尝试得到导航器的高度，然后将身体的高度设置为椭圆隐藏的高度，甚至无法将文件滚动到视口之外。:flex;}
.nav
浏览 0提问于2018-11-24得票数 0
回答已采纳
1回答
我有一个嵌套在父级下拉列表中的下拉菜单。父级下拉菜单设置为overflow: hidden，我使用max-height来设置高度转换的动画效果。所以它必须有overflow:隐藏，动画才能正常工作。问题是我现在有一个子下拉列表嵌套在父下拉列表中。因为parent下拉菜单是overflow: hidden，所以子下拉菜单被parent下拉菜单隐藏。我的问题是:有没有
浏览 19提问于2021-03-08得票数 0
6回答
我正在为的导航工作，并且遇到了下垂导航的问题。基本上，我已经将overflow: hidden应用于包含导航项的容器，以便滚动效果正常工作(导航项的底部是“蒙面”)；如果您在网站上滚动导航，您将看到我的意思。对于Products，有一个下拉导航。作为内置在Business催化剂(CMS)中的站点，我</
浏览 0提问于2011-08-16得票数 27
回答已采纳
2回答
下拉菜单样式问题
、、、、
我的导航栏上的下拉菜单叫做"Works“。我似乎不明白为什么"Works“会有一个灰色的方框，而导航栏上的其他单词却没有。导航{margin: 0;overflow: hidden<
浏览 0提问于2018-08-17得票数 0
4回答
动画下拉菜单引导4
、、、、
bootstrap (4.0)中的下拉列表的原生方式不是动画。如何让它像导航栏折叠时一样“滑动”打开？ </li> <a class="nav-link dropdown-toggle"
浏览 0提问于2018-04-25得票数 8
2回答
在我的Vue js应用程序中，导航栏由于滚动条而闪烁，即，在一些路线中有滚动条，而在一些路线中没有滚动条，因为导航栏闪烁与此stackoverflow页面相同，每当在路线之间切换时滚动条都会闪烁。有没有办法从导航栏中删除滚动条？
浏览 21提问于2019-10-01得票数 0
我有一个页面，当我滚动内容时，我希望导航栏总是出现在页面的顶部。0; /* Position the navbar at the top of the page */ overflow: hidden; margin-top: 30px;}
问题是，一旦我添加了z-index:-1，主内容就失去了点击
浏览 4提问于2020-11-16得票数 0
回答已采纳
1回答
我正在使用react-bootstrap库创建一个引导导航栏，如果不是这样，它就可以水平滚动，否则就会从页面溢出。在此之前：之后：是否有一种方法来维护滚动功能并正确显示这些下拉列表？还有谁知道我怎样才能防止下拉列表打开时引起的垂直滚动？className="me-auto
浏览 4提问于2022-07-09得票数 1
回答已采纳
我有一个带有height: 5vh的导航条，而页面的其余部分在一个带有height: 95vh的容器中。我使用display: flex作为导航条、<ul>元素和align-items: stretch，以便<li>元素具有100%的导航条高度。另外，我将<a>元素的高度设置为父<li&
浏览 2提问于2022-03-08得票数 1
回答已采纳
我有一个元素，Opera显示的比它应该显示的要高(53像素而不是35像素)。因此，我尝试显式地设置这个jquery-ui元素的样式。当我用Dragonfly查看元素时，这是我在样式中看到的：height: 35px;min-height: 35px;
padding最小高度，最大高度和高度相同- 35px。但这就是“计算风格”<
浏览 0提问于2012-11-09得票数 0
回答已采纳
1回答
但是第二个dropdown在按钮组和高度中，没有展开( height :auto在这种情况下不起作用)。我的场景与相同。第二个dropdown将被创建，我认为这可能是不响应dynamically.So :auto的原因。但是当我在相同的导航中打开第二个dropdown时，height auto不会expand.Here height只有大约122px
代码是，
<div class="navba
浏览 3提问于2017-03-12得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
