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

【问题标题】：HTML Flows Strange (a content appearing in a wrong place?)HTML Flows Strange（内容出现在错误的位置？）
【发布时间】：2019-03-23 21:31:19
【问题描述】：

我是 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>

观察： 1 - 徽标正在工作，我只是没有直接链接。

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

目标：使内容（conteudo）适合整个屏幕，除了导航，修复我目前遇到的问题（它显示在导航栏上，当它获得 680 像素的媒体查询时）。

如果您觉得这篇文章令人困惑，请发表评论，我既不是来自美国也不是说英语的国家

【问题讨论】：

这里不清楚“具体”编码问题...您需要什么帮助，因为您是 html/css 新手？嗯好的。然后阅读MCVE 了解如何询问可重现问题。 -- 否则，请更具体并发布您的代码。
@LouysPatriceBessette 检查编辑是否有帮助:)
在手机上删除您的position:fixed。
非常感谢你，成功了！
将其发布为答案，以便我将其标记为正确@Stender

标签： javascript jquery html css flow

【解决方案1】：

您在移动设备上的位置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>

【讨论】：

【解决方案2】：

将所有 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%;
}

【讨论】：

感谢您的回答，但这不起作用。我的意思是，由于代码中的“内容”或 conteudo 位于顶部，它将在顶部创建一个边距prnt.sc/l7rolc