html - 移动菜单按钮不停留在导航内

使用下面的代码，我想在我的<container>中创建一个移动菜单按钮<navigation>。到目前为止，所有这些工作正常。

但是，以某种方式，移动菜单按钮不会停留在<nav>内。 （请参阅绿色容器与黄色导航的比较）

我猜这与宽度和高度的固定px有关。但是，当我将其更改为％宽度时，条形完全消失。

我必须在代码中进行哪些更改，以使<container>保留在周围的<nav>中？

您也可以找到我的代码here

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.navigation {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.container {
 display: inline-block;
 cursor: pointer;
 float: right;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: green;
}

.bar1, .bar2, .bar3 {
 width: 35px;
 height: 5px;
 background-color: #333;
 margin: 6px 0;
 transition: 0.4s;
}

<div class="header">
  <nav class="navigation">
    <div class="container">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </nav>
</div>

最佳答案

从height: 10%;移除.header，其高度为10%

body {
  margin: 0;
}

.header {
  width: 80%;
  /* height: 10%; */
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.navigation {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.container {
 display: inline-block;
 cursor: pointer;
 float: right;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: green;
}

.bar1, .bar2, .bar3 {
 width: 35px;
 height: 5px;
 background-color: #333;
 margin: 6px 0;
 transition: 0.4s;
}

<div class="header">
  <nav class="navigation">
    <div class="container">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </nav>
</div>

关于html - 移动菜单按钮不停留在导航内，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45812877/