网格区域未填满未占用的空间

Question

我目前已经使用网格区域对我的网站进行了网格布局。这是我目前为 body 指定的样式：

display: grid;
    grid-template-areas: 
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-gap: 2%;

除了“aside”之外，我使用它的所有内容都完美对齐。我已将主宽度设置为 50%，但是，旁白开始时就好像宽度设置为 100%，留下了一个非常小的旁白部分。这就是我当前的结果：

这是我目前的导航、主要和旁白的样式：

.setNav {
    grid-area: nav;
    width: 150%;
    height: 93%;
    background-color: #283542;
    border: 3px solid black;
    border-radius: 5px;
    margin: 2em 1em 2em 0;
}
.setMain {
    grid-area: main;
    width: 50%;
    height: 93%;
    background-color: #283542;
    border: 3px solid black;
    border-radius: 5px;
    margin: 2em 0 .5em 1em;
    overflow-y: scroll;
    overflow-wrap: normal;
}
.setAside {
    grid-area: aside;
    width: 50%;
    height: 93%;
    background-color: #283542;
    border: 3px solid black;
    border-radius: 5px;
    margin: 2em 0 .5em auto;
    overflow-y: scroll;
    overflow-wrap: normal;
}

这是我如何为这些元素设置 HTML 格式的示例：

    <div class="setAside">
        <aside>
            <div>
                <h1>Aside</h1>
            </div>
        </aside>
    </div>

此外，为了进一步说明我的宽度设置，我使用 box-sizing: border-box; 对所有 html 元素进行了样式化。（以及适用于不同浏览器的 webkit 和 moz）。

我似乎无法弄清楚如何让我的“旁白”从我的“主”的定义末尾开始。

我尝试检查我的填充/边距，尽管它们都没有设置得那么高以提供这么多空间。

Answer 1

该模板如何设置为随页面缩放？

使用 flex unit

fr

自动缩放网格列和行：

body {
  height: 100vh;
  margin:0;

  display: grid;
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
  
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 9fr;
}

body div {
  border: 3px solid black;
  border-radius: 5px;
  margin: .2rem .2rem .2rem .2rem;
}

.setHeader {
  grid-area: header;
  background-color: orange;
}

.setNav {
  grid-area: nav;
  background-color: lime;
}

.setMain {
  grid-area: main;
  background-color: blue;
}

.setAside {
  grid-area: aside;
  background-color: lime;
}

<body>
  <div class="setHeader">
    Header
  </div>
  <div class="setNav">
    Nav
  </div>
  <div class="setMain">
    Main
  </div>
  <div class="setAside">
    Header
  </div>
</body>

网格区域未填满未占用的空间

问题描述投票：0回答：1

1个回答

最新问题

网格区域未填满未占用的空间

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1