你好，我在新的响应式事情和我havint麻烦这需要一些帮助 左侧和右侧工作正常，但当我调整窗口大小时，左侧消失，右侧保持在原始位置，它不会到达顶部。 任何人都可以指导我：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Administrador Veterinario</title>
<meta name="title" content="Administrador Veterinario"/>
<meta name="description" content="Administrador Veterinario"/>
<meta name="keywords" content="Administrador Veterinario"/>
<link rel="stylesheet" href="../cssVETS/style.css" type="text/css" media="all" />
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<!-- Heasder Starts Here -->
<header class="header">
<div class="head_content">
<div id="logo"><a href="administrador.php"><img src="../images/<?php echo logo($vets); ?>" width="150" class="img-rounded" /></a></div>
</div>
</header>
<!-- menu
<nav>
<div class="menu">----</div>
</nav>
-->
<div class="subContenedor">
<!-- Sidebar -->
<aside class="left-side">
<!-- Left side bar goes here -->
</aside>
<!-- content -->
<section>
<div class="right-side">
<!-- Text Content Goes here -->
</div>
</section>
</div>
<!-- footer -->
<footer class="footer">
<!-- Footer content goes here -->
</footer>
</div> <!-- End of Wrapper -->
</body>
</html>
CSS：
* { margin: 0; padding: 0; outline: 0; }
a { color: #067aa7; text-decoration: none; cursor: pointer; }
a:hover{ text-decoration: underline; }
img { border: 0; }
article, aside, details, footer, header, menu, nav, section { display: block; }
/* Desing Starts Here */
body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background-color:#F1F1F1;
max-width: 1050px;
margin: 0 auto;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
.header{
float: left;
width: 100%;
height: 170px;
margin: 5px 0 0 0;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #fff;
}
.menu{
float: left;
width: 100%;
height: 40px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
/* margin: 5px 0 0 0;*/
background-color:#fff;
}
.subContenedor{
float: left;
width: 100%;
border: 1px solid #000;
/* margin: 5px 0 0 0;*/
background-color:#FFFFFF;
}
.left-side{
float: left;
width: 200px;
margin-left: 5px;
margin-top:5px;
margin-bottom:5px;
background-color:#000;
min-height: 600px;
height: auto !important;
height: 600px;
}
.right-side{
float: left;
width: 830px;
min-height: 600px;
height: auto !important;
height: 600px;
margin: 5px;
background-color:#F00;
}
.footer{
float: left;
width: 100%;
height: 60px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 0 10px 0;
background-color: #bdc8cd;
}
.logo {
width:auto;
height:auto;
float:left;
margin:7px;
}
.avisos {
width:400px;
height:30px;
float:right;
margin-top:2%;
margin-right:10px;
text-align:right;
}
/*********************** LINKS ******************************/
a.btnCAJA {
display: block;
width:190px;
height:auto;
background-color:#fff;
text-decoration: none;
font-size: 11px;
color:#314559;
border-bottom: 1px solid #333;
padding:5px;
}
a.btnCAJA:hover {
background-color: #ccc;
color:#000;
}
/* Lets make the Design Responsive */
@media (min-width: 960px) and (max-width: 1023px) { /* CSS for browsers less than 1024px*/
body { max-width: 920px; }
.left-side{ width: 200px; }
.right-side{ width: 700px; }
}
@media (min-width: 768px) and (max-width: 959px) { /* CSS for browsers less than 960px*/
body { max-width: 720px; }
.left-side{ width: 200px; }
.right-side{ width: 500px; }
}
@media (min-width: 600px) and (max-width: 767px) { /* CSS for browsers less than 768px*/
body { max-width: 580px; }
.left-side{ width: 200px; }
.right-side{ width: 360px; }
}
@media (min-width: 480px) and (max-width: 599px) { /* CSS for browsers less than 600px*/
body { max-width: 460px; }
.header{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 450px; border: 3px solid #007aad; border-radius: 5px; }
.subContenedor{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ visibility:hidden;}
.right-side{ width: 445px; margin: 5px 2px 5px 2px; position: relative; top:0px; }
.footer{ width: 450px;border: 3px solid #FFFFFF; border-radius: 5px; }
}
@media (min-width: 320px) and (max-width: 479px) { /* CSS for browsers less than 480px*/
body { max-width: 310px; }
.header{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 300px; border: 3px solid #007aad; border-radius: 5px; }
.subContenedor{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ visibility:hidden;}
.right-side{ width: 294px; margin: 5px 2px 5px 2px; }
.footer{ width: 300px;border: 3px solid #FFFFFF; border-radius: 5px; visibility:hidden;}
}
@media (max-width: 319px) { /* CSS For 320px or less browsers */
body { max-width: 100%; }
.left-side{ visibility:hidden;}
.right-side{ width: 96%; }
}
/* */
答案 0 :(得分：0)
它是隐藏的，因为你有一点CSS这样做（可见性：隐藏）：
.left-side{ visibility:hidden;}
您可能希望删除该行，或将其更改为：
.left-side { width: 96% }
或100％，它取决于你。
但是，在小屏幕中隐藏导航并实施移动导航是一种很好的做法。互联网上有很多例子。 This只是一个例子，使用jQuery。
答案 1 :(得分：0)
我猜你想在小屏幕上隐藏.left-side？尝试更改
的每个实例.left-side{ visibility:hidden;}
到
.left-side{ display:none;}
具有＆＃34;可见性的元素：隐藏＆＃34;仍占用文档中的空间但不可见。您希望从文档流中完全删除元素并使其不可见，这就是＆＃34; display：none＆＃34;确实