HTML Flows Strange（内容出现在错误的位置？）

时间：2018-10-19 01:42:41

标签： javascript jquery html css flow

我是css / html的新手，我在学校里一直在学习它，我们只是对Javascript进行了介绍等等。 我们目前正在开发一个网站项目。

但是，当我尝试将内容与导航栏放在一起时，发生了一件奇怪的事情，当您尝试将尺寸调整为620像素或更小时，导航栏应为100％的宽度和20％的高度，没关系。

因此，我的想法是“为什么不把内容位置放在相对位置20％的最前面？所以它非常适合”，但没有发生。另外，由于内容位于html中，因此它不应该显示在菜单本身下吗？即使没有职位？

https://codepen.io/kauegatto/full/qJYaxL

代码如下：

$(document).ready(function() {
  $("#ativarmenu").click(function() {
    $("#menu").slideToggle();
  });
});
/* ORGANIZAÇÃO GERAL*/

*,
html {
  margin: 0;
  padding: 0;
}

body {
  background: #fafafa;
}

#clearfix {
  clear: both;
}


/* BARRINHA LATERAL*/

#nav {
  width: 13%;
  height: 100%;
  background: #222;
  position: fixed;
  left: 0;
  float: left;
  color: #fafafa;
}

#logo {
  width: 95%;
  height: 30%;
  margin: 0 auto;
  position: relative;
  top: 5%;
}

#logo img,
#logoresponsive img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#logoresponsive {
  display: none;
}

#menu {
  width: 100%;
  height: 50%;
  background: #222;
  color: #fafafa;
  position: relative;
  top: 5%;
}

#links {
  width: 100%;
  position: relative;
  top: 15%;
}

li {
  list-style: none;
  text-align: center;
  margin: 10% 0;
  width: 100%;
}

#nav li a {
  font-size: 20px;
}

#nav a {
  color: #fafafa;
  text-decoration: none;
  text-align: center;
  width: 100%;
}

#nav li:hover a {
  color: #5271ff;
}


/* Hamburguer */

#hamburguer {
  display: none;
}

#nav li a {
  font-size: 17.5px;
}


/* tamanho do CONTEUDO */

#conteudo {
  width: calc(100% - 13%);
  left: 13%;
}


/* RESPONSIVE */

@media only screen and (max-width: 1000px) {
  #nav li a {
    font-size: 15px;
  }
  #nav {
    width: 15%;
  }
  /* CONTEUDO */
  #conteudo {
    width: calc(100% - 15%);
    left: 15%;
  }
}

@media only screen and (max-width: 920px) {
  #nav li a {
    font-size: 13px;
  }
  #nav {
    width: 18%;
  }
  /* CONTEUDO */
  #conteudo {
    width: calc(100% - 18%);
    left: 18%;
  }
}

@media only screen and (max-width: 810px) {
  #nav li a {
    font-size: 15px;
  }
  #nav {
    width: 22%;
  }
  /* CONTEUDO */
  #conteudo {
    width: calc(100% - 22%);
    left: 22%;
  }
}

@media only screen and (max-width: 680px) {
  #menu,
  #logo {
    display: none;
  }
  #logoresponsive {
    display: block;
  }
  #nav {
    width: 100%;
    height: 20%;
  }
  #nav a {
    text-decoration: none;
    width: 100%;
  }
  #nav li:hover a {
    color: #0097e6;
  }
  #logoresponsive {
    position: relative;
    height: 100%;
    width: 30%;
    top: 0;
    min-width: 110px;
    margin: 0 auto;
  }
  #ativarmenu {
    width: 7.5%;
    height: 5%;
    cursor: pointer;
    position: relative;
    left: 5%;
    top: -50%;
  }
  #hamburguer,
  #hamburguer::before,
  #hamburguer::after {
    width: 70%;
    background: #fafafa;
    height: 33.3%;
    border-radius: 5px;
    cursor: pointer;
    display: block;
  }
  #hamburguer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #hamburguer::after,
  #hamburguer::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #hamburguer::before {
    bottom: 300%;
  }
  #hamburguer::after {
    bottom: -300%;
  }
  #menu {
    width: 50%;
    height: 80%;
    display: none;
    position: fixed;
    left: 0;
    top: 20%;
    color: #fafafa;
  }
  #menu li a {
    font-size: 16px;
  }
  /* CONTEUDO */
  #conteudo {
    width: 100%;
    position: relative;
    left: 0;
    top: 20%;
  }
}

@media only screen and (max-width: 290px) {
  #menu li a {
    font-size: 12px;
  }
}


/* CONTEUDO PRINCIPAL */

#conteudo {
  clear: both;
  background: #666;
  position: relative;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <meta author="kaue e nicollas" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
  <div id="main">
    <div id="nav">
      <div id="logo">
        <img src="img/logo.png" alt="logo" width="80%" />

      </div>
      <div id="logoresponsive">
        <img src="img/logoresponsive.png" alt="logo" height="80%" />
      </div>
      <div id="ativarmenu" />
      <div id="hamburguer"></div>
    </div>
    <div id="menu">
      <div id="links">
        <ul>
          <li><a href="#">Produtos</a></li>
          <li><a href="#">Configurações</a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Quem Somos?</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="conteudo">

    <h2>Noticias</h2>
  </div>

</body>

</html>

obs： 1-徽标有效，我没有直接链接。

2-获取完整视图，否则可能会出现故障。

目标：使内容（可选）适合整个屏幕，除导航栏外，解决我当前遇到的问题（当导航到680px的媒体栏时，它会显示在导航栏上）。

如果您发现此帖子令人困惑，请发表评论，我不是来自美国，也不是讲英语的国家/地区

2 个答案:

答案 0 :(得分：0)

将所有css放置在不同的屏幕中

 @media screen and (min-width:769px){
   ...
    nav{
        width:20%;
    }
    ...
}
@media screen and (max-width:768px){
    ...
     nav{

       width:100%;
       height:20%;
    }
    .content{

        top:20%;
        height:80% ;
     }
    ...
}

也可以使用相对值，例如

.logo{
    margin-top:20%;
}

答案 1 :(得分：0)

您在移动设备上的位置fixed，迫使该框仅考虑视口

将其删除并将其设置为相对，并为标头指定固定高度，而不是基于百分比。

您仍然需要摆弄其他展示位置-但这将使您在标题上的正确定位。

		$(document).ready(function(){
			$("#ativarmenu").click(function(){
					$("#menu").slideToggle();
			});
		});
/* ORGANIZAÇÃO GERAL*/
*,html{
	margin:0;
	padding: 0;
}

body{
	background:#fafafa;
}
#clearfix{
	clear:both;
}

/* BARRINHA LATERAL*/

#nav{
	width: 13%;
	height: 100%;
	background: #222;
	position: fixed;
	left: 0;
	float: left;
	color:#fafafa;

}

#logo{
	width: 95%;
	height: 30%;
	margin: 0 auto;
	position: relative;
	top: 5%;
}
#logo img, #logoresponsive img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#logoresponsive{
	display: none;
}
#menu{
	width: 100%;
	height: 50%;
	background:#222;
	color:#fafafa;
	position: relative;
	top: 5%;
}
#links{
	width: 100%;
	position: relative;
	top:15%;
}
li{
	list-style: none;
	text-align: center;
	margin: 10% 0;
	width: 100%;
}

#nav li a{
	font-size: 20px;
}
#nav a{
	color:#fafafa;
	text-decoration: none;
	text-align: center;
	width: 100%;
}
#nav li:hover a{
	color:#5271ff;


}
/* Hamburguer */

#hamburguer{
	display: none;
}
#nav li a{
	font-size: 17.5px;
}

/* tamanho do CONTEUDO */
	#conteudo{
		width: calc(100% - 13%);
		left: 13%;
	}

/* RESPONSIVE */
@media only screen and (max-width: 1000px){
  #nav li a{
	font-size: 15px;
}
	#nav{
		width: 15%;
	}

	/* CONTEUDO */
		#conteudo{
			width: calc(100% - 15%);
			left: 15%;
		}
}
@media only screen and (max-width: 920px){
  #nav li a{
	font-size: 13px;
}
	#nav{
		width: 18%;
	}

	/* CONTEUDO */
		#conteudo{
			width: calc(100% - 18%);
			left: 18%;
		}
}

@media only screen and (max-width: 810px){
  #nav li a{
	font-size: 15px;
}

#nav{
	width: 22%;
}

/* CONTEUDO */
	#conteudo{
		width: calc(100% - 22%);
		left: 22%;
	}
}

@media only screen and (max-width: 680px){
  
  
  
	#menu,#logo{
		display: none;
	}
	#logoresponsive{
		display: block;
	}
	#nav{
			width: 100%;
			
    position:relative;
    height: 110px;
		}
  
 

	#nav a{
		text-decoration: none;
		width: 100%;
	}
	#nav li:hover a{
		color:#0097e6;
	}
	 #logoresponsive{
		position: relative;
	 	height: 100%;
		width: 30%;
		top: 0;
		min-width: 110px;
	 	margin: 0 auto;
	 }

	 #ativarmenu {
	     width: 7.5%;
	     height: 5%;
	     cursor: pointer;
	     position: relative;
	     left: 5%;
	     top: -50%;
	 }
	#hamburguer, #hamburguer::before, #hamburguer::after{
	  width: 70%;
	  background: #fafafa;
	  height: 33.3%;
	  border-radius: 5px;
	  cursor: pointer;
	  display: block;
		}

	#hamburguer {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}
	#hamburguer::after, #hamburguer::before{
	  content:"";
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	#hamburguer::before{
	  bottom: 300%;
	}
	#hamburguer::after{
	  bottom: -300%;
	}

	#menu{
		width: 50%;
		height: 80%;
		display: none;
		position: fixed;
		left: 0;
		top:20%;
		color:#fafafa;
	}
	#menu li a{
		font-size: 16px;
	}

/* CONTEUDO */
	#conteudo{
		width:100%;
		position: relative;
		left: 0;
		top: 20%;
	}
}

@media only screen and (max-width: 290px)
{
 #menu li a{font-size:12px;}

}

/* CONTEUDO PRINCIPAL */
#conteudo{
	clear: both;
	background: #666;
	position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
	<meta charset="utf-8"/>
	<meta author="kaue e nicollas"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="estilo.css">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
<div id="main">
		<div id="nav">
			<div id="logo">
				<img src="img/logo.png" alt="logo" width="80%"/>

			</div>
			<div id="logoresponsive">
				<img src="img/logoresponsive.png" alt="logo" height="80%"/>
			</div>
			<div id="ativarmenu"/>
				<div id="hamburguer"></div>
			</div>
			<div id="menu">
				<div id="links">
					<ul>
						<li><a href="#">Produtos</a></li>
						<li><a href="#">Configurações</a></li>
						<li><a href="#">Sobre</a></li>
						<li><a href="#">Quem Somos?</a></li>
					</ul>
				</div>
			</div>
</div>
		<div id="conteudo">

			<h2>Noticias</h2>
		</div>

</div>
</body>
</html>

相关问题
最新问题