html - 容器未调整到页面的全宽

Question

所以我这里有一个我正在构建的小用户界面。看看我的 html 它非常简单，但是我有一些奇怪的行为。尽管页面容器包装了 aside 和 .main 元素，但它似乎将自己插入到网格中。我想将 .main 元素放入 .page-container 网格的中心列。我缺少什么吗？

你们得到的任何东西都会有所帮助。谢谢!

body{
  margin:0;
  min-height:100vh;
}

label{
  margin:0.9em 0;
}

.page-container{
  display:grid;
  width:100vw;
  grid-template-columns:25% 50% 25%;
  grid-template-rows:100%;
  grid-template-areas:"margin main margin";
}

.main{
  grid-area:main;
  width:100%;
  height:100%;
  background-image:url("https://live.staticflickr.com/3771/11167360764_2512d790b3_z.jpg");
}

.controls{
  width:25%;
  height:100%;
  position:absolute;
  
  background-color:green;
  
  font-family:sans-serif;
  
  -webkit-box-shadow: 10px 3px 5px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 3px 5px -4px rgba(0,0,0,0.75);
box-shadow: 10px 3px 5px -4px rgba(0,0,0,0.75);
  
  word-break:break-word;
}
.controls-wrapper{
  margin:3em 5% 5% 1em;
  
}

<div class="page-container">
  <aside class="controls">
      <form class="controls-wrapper">
        <label for="p_font_size">change paragraphs font size:</label>
        <br>
        <select name="" class="p_font_size">
          <option value="25pt">25pt</option>
          <option value="11pt">11pt</option>
        </select>
        
        
    </form>  
  </aside>
  <main class="main">
    <p>fsdanfdjsanfsdsafdsajansan</p>
  </main> 
</div>

Answer 1

grid-template-rows 属性定义每一行的高度。通过改变我认为你可以获得你想要的结果，例如:

   .page-container{
      display:grid;
      width:100vw;
      grid-template-columns:auto auto auto;
      grid-template-rows:100% 100% 100%;
      grid-template-areas:"margin main margin";
  }

grid-template-columns:25% 50% 25% 也可以正常工作

希望我已经正确理解你的问题