html - 即使左侧 div 有更多数据，也希望左侧 div 与内容 div 匹配大小

Question

我正在为我正在使用 css-grid 的网站构建布局。如果它解决了我的目的，我也愿意使用 flexbox。我有页眉、页脚、左小部件、右小部件和主要部分 (div)。我希望布局占据整个屏幕。如果主要部分根据其内容展开，我希望左右小部件与其大小相匹配。

P.S - 左右小部件可以包含比主要内容更多的内容，在这种情况下我想要左右小部件中的滚动条

我已经尝试使用 css-grid 进行此操作，但左右和主要部分占用了最大 div 的大小。

.container {
  display: grid;
  grid-template-areas: 'header header header' 'left main right' 'footer footer footer';
  grid-template-rows: 3vh minmax(93vh, auto) 3vh;
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class=container>
  <div class=header>

  </div>
  <div class=leftWidget>

  </div>
  <div class=main>

  </div>
  <div class=rightWidget>

  </div>
  <div class=footer>
  </div>
</div>

Answer 1

您可以对代码进行以下更改:

• 对第二行使用 auto(而不是 93vh)，以便它占据其内容的空间，

• header 和 footer 可以使用固定高度(例如 3em)，而不是 3vh 高度，

• 为 3 个相等的列添加一个 grid-template-columns: 1fr 1fr 1fr 定义，允许边栏和内容区域采用相同的宽度。

请参阅下面的演示，边栏中的内容少于内容区域的内容 - 这是有效的，因为内容区域具有更高的高度:

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 'header header header' 
                       'left main right' 
                       'footer footer footer';
  grid-template-rows: 3em auto 3em; /* middle row occupies space of its contents */
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class=container>
  <div class=header>Header</div>
  <div class=leftWidget>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class=main>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here 
  </div>
  <div class=rightWidget>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class=footer>Footer</div>
</div>

---

要确保中间行的高度由 main 元素定义，您可以在侧边栏内使用额外的包装器并使用绝对定位 - 请参见下面的演示:

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 'header header header' 
                       'left main right' 
                       'footer footer footer';
  grid-template-rows: 3em auto 3em;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
  overflow: auto;
  position: relative;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
  overflow: auto;
  position: relative;
}

.leftWidget > div,
.rightWidget > div {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class="container">
  <div class="header">Header</div>
  <div class="leftWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </div>
  </div>
  <div class="main">
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class="rightWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here 
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

---

如果你想给grid容器设置一个min-height，并且只有在那之后才有上面的效果，只需在容器中添加height: 100vh即可:

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 'header header header' 
                       'left main right' 
                       'footer footer footer';
  grid-template-rows: 3em auto 3em;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  height: 100vh;
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
  overflow: auto;
  position: relative;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
  overflow: auto;
  position: relative;
}

.leftWidget > div,
.rightWidget > div {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class="container">
  <div class="header">Header</div>
  <div class="leftWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </div>
  </div>
  <div class="main">
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class="rightWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here 
    </div>
  </div>
  <div class="footer">Footer</div>
</div>