【发布时间】：2015-08-05 04:22:22
【问题描述】：
我有一个“汉堡包”移动导航按钮，单击该按钮会显示一个名为#navigation 的 div。但是，由于 div 的位置（它在其他 div 中），div 不会扩展到文档宽度的 100%，只是容器 div 宽度的 100%。
这不仅是一个问题，而且还有一个次要问题，因为导航 div 也与标题 div 和它下面的 div 略有重叠。我宁愿它把标题向上推，把它下面的 div 向下推。
虽然我可以将此 div 从容器中取出并可能通过将其放置在其他位置来解决问题，但这会导致页面全尺寸版本的导航出现问题，因为两个版本的#navigation div 相同页面，只是样式不同。这是代码。
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
}
.show-menu:hover {
background: #ac1111;
}
#extra {
background: #222922;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
@media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#333333;
top: 0;
left: 0;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
}<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async>
</script>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</div>
Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>
<a href="#" class="current">
Home
</a>
</li>
<li>
<a href="#">
Customer Research
</a>
</li>
<li>
<a href="#">
Business Improvement
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="extra">
<div class="wrap">
Test
</div>
</div>
</body>
</html>【问题讨论】：
标签： css