Question

我正在为要使用CSS网格的网站构建布局。如果可以解决我的目的，我也愿意使用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

@kukkuz-我遵循了您先前建议的小提琴。对我来说很好。谢谢。也许您删除了小提琴，但这是我遵循的。如果将来有人需要，我会在此处再次发布代码。我已经做了一些基本的调整以满足我的需要。

body {
    margin: 0;
  }

  .container {
    display: grid;
    grid-template-areas: 'header header header' 'left main right' 'footer footer footer';
    grid-template-rows: minmax(60px,4vh) 1fr minmax(40px,3vh);
    grid-template-columns: minmax(150px,12vw) minmax(700px,1fr) minmax(200px,15vw);
    height: 100vh;
  }

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

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

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

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

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

代码信用-@kukkuz

Answer 2

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

对第二行使用auto（而不是93vh），以便占用其内容空间，
，而不是 header 和 footer 的3vh高度，您可以使用固定高度（例如3em）
为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>

如果要使网格容器的高度最小化并仅在此之后才具有上述效果，只需将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>

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

2 个答案: