Html 溢出：隐藏；不适用于嵌套的div

在你说什么之前，我看了一下，所以我要么像这样错过了这篇文章，要么它不是一篇重复的文章，请记住，这似乎与大多数溢出问题类似

好的，我的问题是我做了一个下拉导航，当然它使用列表，向左浮动，向右对齐。。。。我可以使用overflow:hidden on body，可以在桌面上正常工作，但不能移动（当然我稍后会将hover等更改为javascript onclick for mobile），所以我有一个想法，将其全部嵌套在一个div中，将其设置为100%宽度/高度，理论上应该可以工作，对吗？好吧，它没有，我已经做了一个类来隐藏溢出，在div上用背景为我导航，但不是在一个单独的div上用背景导航，代码如下

/*导航后面的渐变*/
#导航梯度{
背景：线性梯度（#ffff00，#CCCC00）；
位置：绝对位置；
左：0%；
最高：0%；
高度：70像素；
宽度：100%；
z指数：0；
}
/*导航被索引到背景和上面的主要内容之前^^^*/
.nav{
位置：相对位置；
左：60%；
最高：20%；
}
/*删除边距和填充*/
保险商实验室{
边际：0px；
填充：0px；
}
/*导航栏设计*/
ulli{
浮动：左；
宽度：7%；
高度：40px；
不透明度：0.9；
线高：40px；
文本对齐：居中；
字体大小：90%；
右：3%；
左：3%；
列表样式：无；
边际：0px；
}
/*导航杆的连杆设计*/
ullia{
文字装饰：无；
颜色：黑色；
字体风格：粗体；
字号：800；
显示：块；
}
/*悬停时放置导航的文本*/
悬停{
颜色：#999999；
不透明度：1；
}
/*默认情况下，在您悬停之前不会显示任何内容*/
ulli ulli{
显示：无；
}
/*悬停时放下*/
ul li：悬停ul li{
显示：块；
左边缘：-20%；
宽度：140%；
背景色：#5555ff；
}
/*防止溢出（出于好意）*/
.nav_集装箱{
宽度：100%；
高度：70像素；
溢出：隐藏；
}
/*当我悬停的时候，我的想法是使div在Y轴上可以看到下拉，而在x轴上仍然保持溢出*/
.nav_容器：悬停{
身高：100%；
}
/*在屏幕中央为所有内容创建一个div，索引为在导航栏后面但在背景前面*/
#内容{
位置：绝对位置；
左：25%；
最高：15%；
身高：84.4%；
宽度：50%；
背景色：#ffffff；
边框：2件纯黑；
边界半径：0px；
z指数：-1；
溢出：自动；
}
/*如果屏幕低于860像素，则会出现以下情况*/
@仅介质屏幕和（最大宽度：860像素）{
.导航{
位置：相对位置；
左：55%；
最高：20%；
}
ul li：悬停ul li{
显示：块；
左边缘：-40%；
宽度：180%；
背景色：#5555ff；
}
#导航梯度{
背景：线性梯度（#ffff00，#CCCC00）；
位置：绝对位置；
左：0%；
最高：0%；
高度：50px；
宽度：100%；
z指数：0；
}
}

家













这是主内容div，在我的导航之前编制索引。

从

导航类

中删除

左侧：60%

，它将滚动到div

.nav { 
    position:relative;
    /*left:60%;*/
    left: 0;
    top:20%;
}

您可以对所有正文使用

溢出隐藏

body{
    overflow: hidden;
}

试试这个

/*导航后面的渐变*/
#导航梯度{
背景：线性梯度（#ffff00，#CCCC00）；
位置：绝对位置；
左：0%；
最高：0%；
高度：70像素；
宽度：100%；
z指数：0；
}
/*导航被索引到背景和上面的主要内容之前^^^*/
.nav{
位置：相对位置；
左：60%；
最高：20%；
浮动：左；
宽度：40%；
}
/*删除边距和填充*/
保险商实验室{
边际：0px；
填充：0px；
显示器：flex；
宽度：100%；
}
/*导航栏设计*/
ulli{
浮动：左；
宽度：继承；
高度：40px；
不透明度：0.9；
线高：40px；
文本对齐：居中；
字体大小：90%；
右：3%；
左：3%；
列表样式：无；
边际：0px；
}
ul li ul{
显示：块；
}
/*导航杆的连杆设计*/
ullia{
文字装饰：无；
颜色：黑色；
字体风格：粗体；
字号：800；
显示：块；
}
/*悬停时放置导航的文本*/
悬停{
颜色：#999999；
不透明度：1；
}
/*默认情况下，在您悬停之前不会显示任何内容*/
ulli ulli{
显示：无；
}
/*悬停时放下*/
ul li：悬停ul li{
显示：块；
左边缘：-20%；
宽度：140%；
背景色：#5555ff；
}
/*防止溢出（出于好意）*/
.nav_集装箱{
宽度：100%；
高度：70像素；
溢出：隐藏；
}
/*当我悬停的时候，我的想法是使div在Y轴上可以看到下拉，而在x轴上仍然保持溢出*/
.nav_容器：悬停{
身高：100%；
}
/*在屏幕中央为所有内容创建一个div，索引为在导航栏后面但在背景前面*/
#内容{
位置：绝对位置；
左：25%；
最高：15%；
身高：84.4%；
宽度：50%；
背景色：#ffffff；
边框：2件纯黑；
边界半径：0px；
z指数：-1；
溢出：自动；
}
/*如果屏幕低于860像素，则会出现以下情况*/
@仅介质屏幕和（最大宽度：860像素）{
.导航{
位置：相对位置；
左：55%；
最高：20%；
}
ul li：悬停ul li{
显示：块；
左边缘：-40%；
宽度：180%；
背景色：#5555ff；
}
#导航梯度{
背景：线性梯度（#ffff00，#CCCC00）；
位置：绝对位置；
左：0%；
最高：0%；
高度：50px；
宽度：100%；
z指数：0；
}
}

家













这是主内容div，在我的导航之前编制索引。

使用然后

位置：绝对

在DIV上，您试图限制您的视图范围，在您的情况下，它将是

.nav_container{}

，因为一切都随附

/*gradient behind the navigation*/
#nav_grad {
  background: linear-gradient(#ffff00, #CCCC00); 
    position:absolute; 
    left:0%; 
    top:0%; 
    height:70px; 
    width:100%; 
    z-index:0; 
}

/*Navigation is indexed to be infront of background and the main content above^^^*/
.nav { 
    position:relative;
    left:60%;
    top:20%;
}

/*Removes margins and padding*/
ul {
 margin: 0px;
 padding: 0px;
}

/*nav bar design*/
ul li {
 float: left; 
 width: 7%; 
 height: 40px; 
 opacity: 0.9; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
 padding-right: 3%;
 padding-left: 3%;
 list-style: none;
 margin: 0px;
}

/*links design for nav bar*/
ul li a {
 text-decoration: none; 
 color: black;
 font-style: bold;
 font-weight: 800;
 display: block;
}
/*Text of drop navigation when you hover hover*/
ul li a:hover {
 color:#999999;
 opacity:1;
}

/*by default nothing will be displayed until you hover*/
ul li ul li{
 display: none;
}

/*Drop down when you hover*/
ul li:hover ul li {
 display: block;
 margin-left: -20%;
 width: 140%;
 background-color: #5555ff;
}

/*prevents overflow (WELL MEANT TO)*/
.nav_container {
    width:100%;
    height:70px;
    overflow:hidden;
}

/*When I hover the idea is to make the div so drop down can be seen on Y axis, still keeping overflow on the x*/
.nav_container:hover {
    height:100%;
}

/*creates a div in the center of the screen for all the content, indexed to be behind navigation bar but in front of the background*/
#content { 
    position:absolute; 
    left:25%; 
    top:15%; 
    height:84.4%; 
    width:50%; 
    background-color: #ffffff; 
    border: 2px solid black;
  border-radius: 0px;
    z-index:-1; 
    overflow: auto;
}

/*If screen is under 860 pixels below will happen*/
@media only screen and (max-width: 860px){
  .nav {
      position:absolute;
        left:40%;
        top:20%;
  }

    ul li {
 float: left; 
 width: 7%; 
 height: 40px; 
 opacity: 0.9; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
 padding-right: 20%;

 list-style: none;
 margin: 0px;
}

    ul li:hover ul li {
        display: block;
        margin-left: -40%;
        width: 400%;
        background-color: #5555ff;
    }

  #nav_grad {
    background: linear-gradient(#ffff00, #CCCC00); 
      position:absolute; 
      left:0%; 
      top:0%; 
      height:50px; 
      width:100%; 
      z-index:0; 
  }
}