时间戳

首页 > 解决方案 > 容器没有调整到页面的全宽

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

问题描述

所以我这里有一个我正在构建的小用户界面。看我的 html 很简单，但是我有一些奇怪的行为。即使页面容器包装了asideand.main元素，它似乎也将自己插入到网格中。我想将 .main 元素放入.page-container's 网格的中心列。我有什么遗漏吗？

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

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>

标签： htmlcss

解决方案

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% 也可以

希望我能正确理解你的问题

推荐阅读