个人中心
gpt4 book ai didi

html - 溢出 :hidden; not working for nested div

转载 作者：太空宇宙 更新时间：2023-11-04 07:45:40 25 4
gpt4 key购买 nike

在你说什么之前，我看了看，所以我要么错过了这样的帖子，要么它不是重复的，请记住，因为这看起来与大多数溢出问题类似......

好的，所以我的问题是我做了一个下拉导航，当然它使用列表，向左浮动并向右对齐....我可以使用 overflow:hidden on body，在桌面上工作正常但不是移动设备(当然我稍后会将悬停等更改为移动设备的 javascript onclick)，所以我有了一个想法，将其全部嵌套在一个 div 中，将其设置为 100% 宽度/高度，理论上应该可行，对吧？好吧，它没有，我创建了一个类来 overflow hidden ，在带有导航背景的 div 上工作，但不是在背景导航之前的单独 div 中，代码如下。

/*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:relative;
		left:55%;
		top:20%;
  }
	
	ul li:hover ul li {
		display: block;
		margin-left: -40%;
		width: 180%;
		background-color: #5555ff;
	}
    
  #nav_grad {
    background: linear-gradient(#ffff00, #CCCC00); 
	  position:absolute; 
	  left:0%; 
	  top:0%; 
	  height:50px; 
	  width:100%; 
	  z-index:0; 
  }
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="nav_container"> <!--Here is the div that should control drop down list overflow-->

	<!--Linear gradient div is behind navigation-->
	<div id="nav_grad" style="text-align:center;">
		<!--navigation-->
		<div class="nav">
			<ul>
				<li><a href="">Hover</a>
					<ul>
						<li><a href="one.html">Page 1</a></li>
						<li><a href="two.html">Page 2</a></li>
						<li><a href="three.html">Page 3</a></li>
						<li><a href="four.html">Page 4</a></li>
						<li><a href="five.html">Page 5</a></li>
					</ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="contact.html">Information</a></li>
			</ul>		
		</div>
	</div>
</div>
	
<div id="content" style="text-align:center;">
	<table style="border-collapse: separate; border-spacing: 20px;">
		<tr>
			<td align="center">	
				This is main content div, indexed BEFORE my navigation.
			</td>		
	</table>
</div>
</body>
</html>

困扰了我几个星期，可能是一个简单的解决方法，但想不出一个。欢迎任何意见...希望有人知道如何解决这个烦人的问题:P

最佳答案

试试这个

/*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%;
float: left;
width: 40%;
}

/*Removes margins and padding*/
ul {
 margin: 0px;
 padding: 0px;
display: flex;
width: 100%;
}

/*nav bar design*/
ul li {
 float: left; 
 width: inherit; 
 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;
}
ul li ul{
 display: block;
}
/*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:relative;
		left:55%;
		top:20%;
  }
	
	ul li:hover ul li {
		display: block;
		margin-left: -40%;
		width: 180%;
		background-color: #5555ff;
	}
    
  #nav_grad {
    background: linear-gradient(#ffff00, #CCCC00); 
	  position:absolute; 
	  left:0%; 
	  top:0%; 
	  height:50px; 
	  width:100%; 
	  z-index:0; 
  }
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="nav_container"> <!--Here is the div that should control drop down list overflow-->

	<!--Linear gradient div is behind navigation-->
	<div id="nav_grad" style="text-align:center;">
		<!--navigation-->
		<div class="nav">
			<ul>
				<li><a href="">Hover</a>
					<ul>
						<li><a href="one.html">Page 1</a></li>
						<li><a href="two.html">Page 2</a></li>
						<li><a href="three.html">Page 3</a></li>
						<li><a href="four.html">Page 4</a></li>
						<li><a href="five.html">Page 5</a></li>
					</ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="contact.html">Information</a></li>
			</ul>		
		</div>
	</div>
</div>
	
<div id="content" style="text-align:center;">
	<table style="border-collapse: separate; border-spacing: 20px;">
		<tr>
			<td align="center">	
				This is main content div, indexed BEFORE my navigation.
			</td>		
	</table>
</div>
</body>
</html>

关于html - 溢出 :hidden; not working for nested div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48161317/

25 4 0
文章推荐： c - 将十六进制数字映射到连续整数 : GCC's switch works 1. 比我手写的 SSE2 内在函数 cmpeq/movemask/bsf 快 5 倍？
文章推荐： python - 安装 Python 3.0，现在我无法使用我的函数
文章推荐： java - 消除Java排序比较中的越界错误
文章推荐： c - 在两个 digis 数组之间执行求和
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com