Question

我有一个包含隐式行的CSS网格布局。我使用calc(100vh)作为高度，以便使grid的其中一部分可滚动而不是溢出。

body {
  margin: 0px;
}

.statement {
  display: grid;
  grid-template-columns: minmax(300px, auto) minmax(300px, 400px) minmax(400px, auto) minmax(300px, auto);
  grid-gap: 5px;
  height: calc(100vh);
  background-color: #f0f3f4;
}

.header-navbar {
  grid-column: 1 / -1;
  border-bottom: 1px solid #797d89;
  height: 50px;
  background-color: #3a3f51;
  color: #fff;
  text-align: center;
}

.hide-username {
  display: none;
}

.header-username {
  grid-column: 1 / -1;
  margin-top: -10px;
  border-bottom: 1px solid #dee5e7;
  height: 45px;
  background-color: #f7f9f9;
}

.statement-list {
  grid-column: 2 /3;
  margin-right: 10px;
  max-height: 600px;
  overflow-y: auto;
}

.content {
  grid-column: 3 / 5;
  overflow-x: auto;
  overflow-y: auto;
}

<div class="statement">
  <div class="header-navbar">The Header</div>
  <div class="header-username hide-username">Header username</div>
  <div class="statement-list">
    <ul>
      <li>ABCD</li>
      <li>EFGH</li>
      <li>IJKL</li>
      <li>MNOP</li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula mi non risus dignissim pulvinar. Integer sed lacus vitae enim sagittis egestas. In hac habitasse platea dictumst. Sed quis nunc eget nibh facilisis condimentum. Proin imperdiet faucibus
      leo, ut ullamcorper dui sollicitudin id. Sed gravida felis id turpis auctor, sit amet suscipit diam euismod. Curabitur egestas ex ligula, in tincidunt ex sollicitudin eget. Sed sodales tincidunt fermentum. Vivamus at leo eu mauris congue suscipit
      in in felis. Praesent a consequat nisl.</p>

    <p>Etiam vitae sem venenatis, cursus enim sit amet, feugiat diam. Nullam orci lorem, pulvinar id rhoncus at, cursus in nulla. Maecenas eu sapien metus. Nam non elementum justo, vitae aliquet augue. Nam vestibulum purus ut tincidunt iaculis. Sed et sodales
      erat. In aliquam vestibulum urna sit amet egestas. Maecenas euismod sem metus, ut rutrum sapien lobortis et. Morbi efficitur sem semper, tincidunt justo eget, sagittis diam. Vestibulum vitae sapien tincidunt, fermentum tortor vulputate, dapibus
      ipsum.</p>

    <p>Mauris at sollicitudin turpis. Nullam varius nulla felis, sed aliquam diam lobortis in. Curabitur imperdiet tincidunt tellus eget dictum. Phasellus vestibulum scelerisque quam, eu finibus purus ultricies vel. Mauris consectetur vitae eros ac elementum.
      Phasellus sed vehicula tortor. Quisque magna eros, semper nec nisi a, suscipit vulputate tortor. In nisl elit, iaculis quis leo ac, iaculis malesuada enim. Suspendisse eleifend aliquet dolor, et molestie dolor varius eget. Fusce volutpat ornare
      eleifend.</p>

    <p>Proin congue, purus id lacinia tempor, nisi massa accumsan mi, sed aliquet nisi eros nec purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vulputate purus id rhoncus ultricies. Phasellus tristique
      hendrerit consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies diam lorem, ut sodales quam suscipit nec. Proin vulputate ex venenatis, maximus tellus non, posuere risus. Curabitur
      ut tempus urna. Curabitur fermentum in sem sit amet molestie. Vivamus ligula velit, maximus sit amet diam et, egestas euismod ipsum. Suspendisse rutrum ante sagittis gravida eleifend. Nam sit amet lacinia quam. Duis eget feugiat odio, ut convallis
      metus.</p>

    <p>Nam a odio et ex dignissim finibus. Morbi accumsan ex ex, in convallis urna accumsan id. Ut faucibus eget tellus et feugiat. Curabitur condimentum ligula laoreet finibus fermentum. Cras vitae elementum dui. Suspendisse vel mollis dui. Aenean eleifend
      eros vel erat luctus, a maximus diam egestas. Nam et scelerisque mauris. Donec vitae interdum nunc. Nam suscipit ac eros id semper. Fusce pulvinar, dolor vitae congue interdum, justo elit consectetur est, vel luctus ex dolor a erat. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Quisque ut libero rutrum, viverra ex in, congue mi. In eu iaculis nisl, nec suscipit ante. Praesent lorem nulla, luctus pretium metus vel, malesuada euismod erat. Mauris scelerisque mi felis, eu
      hendrerit nisi mattis ut.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula mi non risus dignissim pulvinar. Integer sed lacus vitae enim sagittis egestas. In hac habitasse platea dictumst. Sed quis nunc eget nibh facilisis condimentum. Proin imperdiet faucibus
      leo, ut ullamcorper dui sollicitudin id. Sed gravida felis id turpis auctor, sit amet suscipit diam euismod. Curabitur egestas ex ligula, in tincidunt ex sollicitudin eget. Sed sodales tincidunt fermentum. Vivamus at leo eu mauris congue suscipit
      in in felis. Praesent a consequat nisl.</p>

    <p>Etiam vitae sem venenatis, cursus enim sit amet, feugiat diam. Nullam orci lorem, pulvinar id rhoncus at, cursus in nulla. Maecenas eu sapien metus. Nam non elementum justo, vitae aliquet augue. Nam vestibulum purus ut tincidunt iaculis. Sed et sodales
      erat. In aliquam vestibulum urna sit amet egestas. Maecenas euismod sem metus, ut rutrum sapien lobortis et. Morbi efficitur sem semper, tincidunt justo eget, sagittis diam. Vestibulum vitae sapien tincidunt, fermentum tortor vulputate, dapibus
      ipsum.</p>

    <p>Mauris at sollicitudin turpis. Nullam varius nulla felis, sed aliquam diam lobortis in. Curabitur imperdiet tincidunt tellus eget dictum. Phasellus vestibulum scelerisque quam, eu finibus purus ultricies vel. Mauris consectetur vitae eros ac elementum.
      Phasellus sed vehicula tortor. Quisque magna eros, semper nec nisi a, suscipit vulputate tortor. In nisl elit, iaculis quis leo ac, iaculis malesuada enim. Suspendisse eleifend aliquet dolor, et molestie dolor varius eget. Fusce volutpat ornare
      eleifend.</p>

    <p>Proin congue, purus id lacinia tempor, nisi massa accumsan mi, sed aliquet nisi eros nec purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vulputate purus id rhoncus ultricies. Phasellus tristique
      hendrerit consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies diam lorem, ut sodales quam suscipit nec. Proin vulputate ex venenatis, maximus tellus non, posuere risus. Curabitur
      ut tempus urna. Curabitur fermentum in sem sit amet molestie. Vivamus ligula velit, maximus sit amet diam et, egestas euismod ipsum. Suspendisse rutrum ante sagittis gravida eleifend. Nam sit amet lacinia quam. Duis eget feugiat odio, ut convallis
      metus.</p>

    <p>Nam a odio et ex dignissim finibus. Morbi accumsan ex ex, in convallis urna accumsan id. Ut faucibus eget tellus et feugiat. Curabitur condimentum ligula laoreet finibus fermentum. Cras vitae elementum dui. Suspendisse vel mollis dui. Aenean eleifend
      eros vel erat luctus, a maximus diam egestas. Nam et scelerisque mauris. Donec vitae interdum nunc. Nam suscipit ac eros id semper. Fusce pulvinar, dolor vitae congue interdum, justo elit consectetur est, vel luctus ex dolor a erat. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Quisque ut libero rutrum, viverra ex in, congue mi. In eu iaculis nisl, nec suscipit ante. Praesent lorem nulla, luctus pretium metus vel, malesuada euismod erat. Mauris scelerisque mi felis, eu
      hendrerit nisi mattis ut.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula mi non risus dignissim pulvinar. Integer sed lacus vitae enim sagittis egestas. In hac habitasse platea dictumst. Sed quis nunc eget nibh facilisis condimentum. Proin imperdiet faucibus
      leo, ut ullamcorper dui sollicitudin id. Sed gravida felis id turpis auctor, sit amet suscipit diam euismod. Curabitur egestas ex ligula, in tincidunt ex sollicitudin eget. Sed sodales tincidunt fermentum. Vivamus at leo eu mauris congue suscipit
      in in felis. Praesent a consequat nisl.</p>

    <p>Etiam vitae sem venenatis, cursus enim sit amet, feugiat diam. Nullam orci lorem, pulvinar id rhoncus at, cursus in nulla. Maecenas eu sapien metus. Nam non elementum justo, vitae aliquet augue. Nam vestibulum purus ut tincidunt iaculis. Sed et sodales
      erat. In aliquam vestibulum urna sit amet egestas. Maecenas euismod sem metus, ut rutrum sapien lobortis et. Morbi efficitur sem semper, tincidunt justo eget, sagittis diam. Vestibulum vitae sapien tincidunt, fermentum tortor vulputate, dapibus
      ipsum.</p>

    <p>Mauris at sollicitudin turpis. Nullam varius nulla felis, sed aliquam diam lobortis in. Curabitur imperdiet tincidunt tellus eget dictum. Phasellus vestibulum scelerisque quam, eu finibus purus ultricies vel. Mauris consectetur vitae eros ac elementum.
      Phasellus sed vehicula tortor. Quisque magna eros, semper nec nisi a, suscipit vulputate tortor. In nisl elit, iaculis quis leo ac, iaculis malesuada enim. Suspendisse eleifend aliquet dolor, et molestie dolor varius eget. Fusce volutpat ornare
      eleifend.</p>
  </div>
</div>

但是，当应该滚动的grid-item的高度较小并且页面的总高度小于calc(100vh)时，grid-item出现在中间页面而不是顶部对齐。

body {
  margin: 0px;
}

.statement {
  display: grid;
  grid-template-columns: minmax(300px, auto) minmax(300px, 400px) minmax(400px, auto) minmax(300px, auto);
  grid-gap: 5px;
  height: calc(100vh);
  background-color: #f0f3f4;
}

.header-navbar {
  grid-column: 1 / -1;
  border-bottom: 1px solid #797d89;
  height: 50px;
  background-color: #3a3f51;
  color: #fff;
  text-align: center;
}

.hide-username {
  display: none;
}

.header-username {
  grid-column: 1 / -1;
  margin-top: -10px;
  border-bottom: 1px solid #dee5e7;
  height: 45px;
  background-color: #f7f9f9;
}

.statement-list {
  grid-column: 2 /3;
  margin-right: 10px;
  max-height: 600px;
  overflow-y: auto;
}

.content {
  grid-column: 3 / 5;
  overflow-x: auto;
  overflow-y: auto;
}

<div class="statement">
  <div class="header-navbar">The Header</div>
  <div class="header-username hide-username">Header username</div>
  <div class="statement-list">
    <ul>
      <li>ABCD</li>
      <li>EFGH</li>
      <li>IJKL</li>
      <li>MNOP</li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula mi non risus dignissim pulvinar. Integer sed lacus vitae enim sagittis egestas. In hac habitasse platea dictumst. Sed quis nunc eget nibh facilisis condimentum. Proin imperdiet faucibus
      leo, ut ullamcorper dui sollicitudin id. Sed gravida felis id turpis auctor, sit amet suscipit diam euismod. Curabitur egestas ex ligula, in tincidunt ex sollicitudin eget. Sed sodales tincidunt fermentum. Vivamus at leo eu mauris congue suscipit
      in in felis. Praesent a consequat nisl.</p>

    <p>Etiam vitae sem venenatis, cursus enim sit amet, feugiat diam. Nullam orci lorem, pulvinar id rhoncus at, cursus in nulla. Maecenas eu sapien metus. Nam non elementum justo, vitae aliquet augue. Nam vestibulum purus ut tincidunt iaculis. Sed et sodales
      erat. In aliquam vestibulum urna sit amet egestas. Maecenas euismod sem metus, ut rutrum sapien lobortis et. Morbi efficitur sem semper, tincidunt justo eget, sagittis diam. Vestibulum vitae sapien tincidunt, fermentum tortor vulputate, dapibus
      ipsum.</p>
  </div>
</div>

如何使内容即使不占据整个页面，也应该在页面顶部对齐。

Answer 1

我认为有很多不同的解决方案。一种方法是将第一行的高度限制为标题的高度50px。

body {
  margin: 0px;
}

.statement {
  display: grid;
  grid-template-columns: minmax(300px, auto) minmax(300px, 400px) minmax(400px, auto) minmax(300px, auto);
  grid-gap: 5px;
  height: calc(100vh);
  background-color: #f0f3f4;
  grid-template-rows: 50px auto; /* new */
}

.header-navbar {
    grid-column: 1 / -1;
    border-bottom: 1px solid #797d89;
    height: 50px;
    background-color: #3a3f51;
	color: #fff;
	text-align: center;
}

.hide-username {
    display: none;
}

.header-username {
    grid-column: 1 / -1;
    margin-top: -10px;
    border-bottom: 1px solid #dee5e7;
    height: 45px;
    background-color: #f7f9f9;
}

.statement-list {
    grid-column: 2 /3;
    margin-right: 10px;
    max-height: 600px;
    overflow-y: auto;
}

.content {
    grid-column: 3 / 5;
    overflow-x: auto;
    overflow-y: auto;
}

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="./index1.css">
</head>
<body>
  <div class="statement">
    <div class="header-navbar">The Header</div>
    <div class="header-username hide-username">Header username</div>
    <div class="statement-list">
	  <ul>
	    <li>ABCD</li>
	    <li>EFGH</li>
	    <li>IJKL</li>
	    <li>MNOP</li>
	  </ul>
	</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula mi non risus dignissim pulvinar. Integer sed lacus vitae enim sagittis egestas. In hac habitasse platea dictumst. Sed quis nunc eget nibh facilisis condimentum. Proin imperdiet faucibus leo, ut ullamcorper dui sollicitudin id. Sed gravida felis id turpis auctor, sit amet suscipit diam euismod. Curabitur egestas ex ligula, in tincidunt ex sollicitudin eget. Sed sodales tincidunt fermentum. Vivamus at leo eu mauris congue suscipit in in felis. Praesent a consequat nisl.</p>

      <p>Etiam vitae sem venenatis, cursus enim sit amet, feugiat diam. Nullam orci lorem, pulvinar id rhoncus at, cursus in nulla. Maecenas eu sapien metus. Nam non elementum justo, vitae aliquet augue. Nam vestibulum purus ut tincidunt iaculis. Sed et sodales erat. In aliquam vestibulum urna sit amet egestas. Maecenas euismod sem metus, ut rutrum sapien lobortis et. Morbi efficitur sem semper, tincidunt justo eget, sagittis diam. Vestibulum vitae sapien tincidunt, fermentum tortor vulputate, dapibus ipsum.</p>

    </div>
  </div>
</body>
</html>

Answer 2

控制隐式行大小的属性为grid-auto-rows。其初始值为auto。

有了grid-auto-rows: auto，您可以期望像in various scenarios这样的音轨{{3}}跨容器延伸。这可能会导致网格项目显示为垂直居中。

简单的解决方案是使用grid-auto-rows: 1fr覆盖默认值。

grid-auto-rows: min-content

.statement {
  grid-auto-rows: min-content; /* NEW */
  display: grid;
  grid-template-columns: minmax(300px, auto) minmax(300px, 400px) minmax(400px, auto) minmax(300px, auto);
  grid-gap: 5px;
  height: calc(100vh);
  background-color: #f0f3f4;
}

.header-navbar {
  grid-column: 1 / -1;
  border-bottom: 1px solid #797d89;
  height: 50px;
  background-color: #3a3f51;
  color: #fff;
  text-align: center;
}

.hide-username {
  display: none;
}

.header-username {
  grid-column: 1 / -1;
  margin-top: -10px;
  border-bottom: 1px solid #dee5e7;
  height: 45px;
  background-color: #f7f9f9;
}

.statement-list {
  grid-column: 2 /3;
  margin-right: 10px;
  max-height: 600px;
  overflow-y: auto;
}

.content {
  grid-column: 3 / 5;
  overflow-x: auto;
  overflow-y: auto;
}

body {
  margin: 0px;
}

防止内容自动在包含隐式行的网格中居中

2 个答案: