在构建我的侧边栏时,我注意到我的页面内容似乎有一个上边距(当我检查页面时是52px的身体),但我不知道为什么?我要让我的侧边栏弹出,但我希望我的'.page-content'是全高的。 http://codepen.io/anon/pen/XXKEpE
CSS:
.page-content{
position:relative;
z-index:1;
background-color:black;
}
.toggle{
text-decoration:none;
font-size:30px;
color:black;
position:fixed;
top:20px;
z-index:2;
left:200px;
transition: .3s ease;
}
.sidebar{
position:fixed;
top:0px;
bottom:0px;
left: 0px;
width:120px;
padding:30px;
background:#333;
z-index:0;
}
li{
color: rgba(255,255,255,0.8);
font-family: sans-serif;
font-size:16px;
margin-bottom:16px;
-webkit-font-smoothing: atialiased;
cursor: pointer;
}
li:hover{
color: rgba(255,255,255,1);
}
#sidebartoggler{
display:none;}
#sidebartoggler:checked + .page-wrap .toggle{
left: 15px;
}
#sidebartoggler:checked + .page-wrap .page-content{
padding-left: 180px;
}
HTML:
<input type="checkbox" id="sidebartoggler" name="" value="" />
<div class="page-wrap">
<label for="sidebartoggler" class="toggle">☰</label>
<div class="page-content">...</div>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
答案 0 :(得分:0)
插入此内容:
body {
margin: 0;
padding: 0;
}
(这总是一个好主意......)