【发布时间】：2017-06-14 07:56:26
【问题描述】：
我有一个示例练习，其中侧边栏导航位于屏幕左侧固定。 我说 content-div 应该有一个 绝对位置 到正文，还有一个 padding-left 与侧边栏的宽度，这样我就可以居中我的内容在可见区域（没有侧边栏的宽度）。
现在，当我尝试添加一个媒体查询“当屏幕小于 1000 像素时，侧边栏应该消失并且内容区域的填充应该变为 0（以便它在正常屏幕宽度区域居中） )" 它不起作用。
我是 html 和 css 的初学者
这是我的代码：
body {
font-family: 'Oswald', sans-serif;
padding: 0;
margin: 0;
background-color: #35af7e;
}
@media screen and (max-width: 1000px) {
.Sidebar {
left: -10rem;
}
.body {
padding-left: 0;
padding: 0;
}
}
#flex {
display: flex;
}
/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ; */
.NavIc {
left: 1rem;
top: 1rem;
height: 30px;
width: 30px;
background-color: red;
border-radius: 3px;
z-index: 4;
position: fixed;
cursor: pointer;
}
.NavIc:hover .Sidebar {
background-color: red;
}
.Sidebar {
position: fixed;
width: 10rem;
height: 100%;
background: #E9D758;
color: white;
z-index: 3;
display: flex;
flex-direction: column;
transition: 200ms ease-in-out;
}
.space {
flex-grow: 1;
width: auto;
}
.Nav {
list-style-type: none;
display: block;
width: 100%;
padding: 0;
font-size: 1.5rem;
z-index: 2;
flex-grow: 18;
}
ul li {
box-sizing: border-box;
padding: 0.7rem 0 0.7rem 1rem;
position: relative;
transition: 150ms ease-in-out;
}
ul li:hover {
background-color: white;
color: black;
transform: scale(1.07) translate(0.3rem);
cursor: pointer;
}
.footnotes {
flex-grow: 1;
box-sizing: border-box;
padding: 0 1rem 0 1rem;
}
hr {
border-style: solid;
color: white;
}
.body {
position: absolute;
width: 100%;
padding-left: 10rem;
box-sizing: border-box;
top: 0;
color: white;
transition: 200ms ease-in-out;
}
.mid {
position: relative;
width: 60%;
left: 50%;
transform: translate(-50%);
font-size: 1.5rem;
}
.img {
position: relative;
max-width: 500px;
height: auto;
left: 50%;
transform: translate(-50%);
transition: 200ms ease-in-out;
}
.Logo {
position: relative;
left: 50%;
transform: translate(-50%);
max-width: 100%;
height: auto;
padding: 5rem 0 5rem 0;
}
.mid > hr {
width: 80%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar</title>
<link rel="stylesheet" style="text/css" href="sidebar.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="NavIc">
</div>
<div class="Sidebar">
<div class="space">
</div>
<ul class="Nav">
<li>Home</li>
<li>Gallery</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
<div class="footnotes">
<hr>
<p>blablabla<br>
All rights reserved</p>
<p>blablabla</p>
</div>
</div>
<div class="body">
<div class="mid">
<div class="img">
<img src="Logo.svg" alt="Logo" class="Logo">
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
<hr>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css static media-queries padding