Question

我有一个“汉堡包”移动导航按钮，点击后会显示一个标题为#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>

Answer 1

您可以将position: relative;添加到#header，将position: absolute;添加到#navigation以及top: 69px /*adjust to your needs*/内的@media only screen and (max-width : 920px) {}

绝对位置将其从流程中取出。

div为100％宽度的页面

1 个答案: