【发布时间】：2017-01-29 20:45:25
【问题描述】：
我目前正在制作响应式网站。
每次点击菜单栏调整大小后，main-content都会完全消失。我认为它可能是由 CSS 中某些元素的高度参数或添加 flexbox 参数引起的，但我检查了很多次，我找不到原因。
HTML：
<html>
<head>
<title>SimpleReports</title>
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" href="#">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/general.js"></script>
</head>
<body>
<div id="header">
<div class="logo"><a href="#">X<span>X</span></a></div>
</div>
<a class="mobile" href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>MENU</span></a>
<div id="container">
<div class="sidebar">
<ul id="nav">
<li>
<a class="selected" href="index.html"><span><i class="fa fa-bar-chart" aria-hidden="true"></i></span><span>Panel analityczny</span></a>
</li>
<li>
<a href="tge.html"><span><i class="fa fa-line-chart" aria-hidden="true"></i></span><span>TGE</span></a>
</li>
<li>
<a href="transakcje.html"><span><i class="fa fa-credit-card-alt" aria-hidden="true"></i></span><span>Transakcje</span></a>
</li>
<li>
<a href="wiadomosci.html"><span><i class="fa fa-envelope-o" aria-hidden="true"></i></span><span>Wiadmości</span></a>
</li>
<li>
<a href="uzytkownik.html"><span><i class="fa fa-user-o" aria-hidden="true"></i></span><span>Użytkownik</span></a>
</li>
</ul>
</div>
<div class="main-content">
<div class="title">
XXXX
</div>
<div class="main">
<div class="widget">
<div class="title">x1</div>
<div class="chart">asdas sadasd asdas</div>
</div>
<div class="widget">
<div class="title">x2</div>
<div class="chart"></div>
</div>
<div class="widget">
<div class="title">x3</div>
<div class="chart"></div>
</div>
<div class="widget">
<div class="title">x4</div>
<div class="chart"></div>
</div>
</div>
</div>
</div>
</body>
</html>
jquery:
$(document).ready(function(){
$("a.mobile").click(function(){
$(".sidebar").slideToggle('fast');
});
window.onresize = function(event){
if($(window).width() > 375){
$(".sidebar").show();
}
};
});
CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Lato';
}
span + span {
margin-left: 10px;
}
body {
background-color: #f2f2f2;
}
.a {
text-decoration: none;
}
.logo {
float: left;
margin-top: 14px;
margin-left: 10px;
}
.logo a {
size: 1.6em;
color: #f2f2f2;
}
.logo a span {
font-weight: 300;
}
div#header {
position: absolute;
width: 100%;
height: 50px;
background-color: #077fad;
margin: 0 auto;
}
div#container {
width: auto;
margin: 0 auto;
}
/* komputer */
.sidebar {
width: 250px;
background-color: #044762;
float: left;
padding-top: 50px;
}
ul#nav {
}
ul#nav li {
list-style: none;
}
ul#nav li a {
color: #f2f2f2;
display: block;
padding: 20px;
font-size: 0.8em;
border-bottom: 1px solid #022431;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-webkit-transition: 0.2s;
transition: 0.2s;
}
ul#nav li a:hover {
background-color: #022431;
color: #fff;
}
.mobile {
display: none;
}
ul#nav li a.selected {
background-color: #022431;
color: #fff;
}
.main-content {
padding-top: 40px;
margin-left: 260px;
width: auto;
overflow: scroll;
height: auto;
}
/* main content styles */
.main-content .title {
background-color: #eef1f7;
border-bottom: 1px solid #b8bec9;
font-weight: 700;
color: #333;
font-size: 18px;
}
/* main box container */
.main {
display: flex;
flex-wrap: wrap;
}
.widget {
width: 45%;
height: 250px;
margin: 15px;
border-radius: 6px;
background-color: #ffffff;
}
.widget .title {
background-color: #eef1f7;
border-bottom: 1px solid #dfe4ec;
padding: 10px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
color: #617085;
font-weight: 400;
}
/* tablet */
@media screen and (max-width: 1024px){
.main-content {
margin-left: 100px;
}
.sidebar {
width: 80px;
}
ul#nav li a span:nth-child(2) {
display: none;
}
ul#nav li a i {
font-size: 1.6em;
text-align: center;
}
.widget {
width: 40%;
}
}
/* telefon */
@media only screen and (max-width: 375px){
.mobile {
display: inline-block;
position: absolute;
margin-top: 50px;
padding: 15px;
text-align: left;
background-color: #044762;
font-size: 1em;
width: 100%;
height: 50px;
color: #fff;
}
.sidebar {
display: none;
width: 100%;
padding-top: 100px;
}
ul#nav li a span:nth-child(2) {
display: inline-block;
}
.main-content {
margin-left: 0px;
padding-top: 90px;
height: auto;
}
.widget {
width: 100%;
}
}
@media only screen and (min-width: 376px){
.sidebar {
height: 100%;
}
.main-content {
height: 100%;
}
}
有趣的是，在 sidebar 下添加<p> test </p> 元素后，main-content 是可见的，但是填充有一些问题。
您知道可能导致问题的原因吗？
点击前的样子：
之后（下面什么都没有）：
并在侧边栏下添加<p> test </p>
with test
【问题讨论】：
-
当我点击
.mobile链接codepen.io/anon/pen/qRpdrN时，我没有发生这种情况 -
看起来是因为您的标题栏有
position:absolute。为50px的其他元素添加填充或边距，它应该可以解决您的问题。或者，或者，只需将标题改回position:relative;（或删除该样式声明） -
我看到你正在使用 font-awesome，你还使用任何其他 CSS 框架吗？可以对您的流程有很大帮助，因此您不必编写太多代码。
-
@Jhecht 我在每个元素中添加了这 50 像素，但这不是问题。一切都从主要内容部分的框开始。
-
是菜单位于内容顶部而不是向下推的问题吗？这可以追溯到你应该摆脱
position:absolute，因为这就是它的作用。