程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Prevent content from automatically centering in grid with implicit rows

发布于2021-10-23 03:22     阅读(791)     评论(0)     点赞(4)     收藏(4)


I have a CSS Grid layout with implicit rows. I have used calc(100vh) as height so as to make one of the parts of grid as scrollable rather than overflowing.

Scrollable when <code>content</code> is > 100vh

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>

However, when the height of the grid-item that is supposed to be scrollable is smaller and the total height of the page becomes less than calc(100vh), the grid-item comes in the middle of the page rather than being aligned at the top.

enter image description here

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>

How do I make it such that even when the content doesn't occupy the entire page, it should be aligned at the top-part of the page.


解决方案


I think there are many different solutions. One would be to restrict the height of the first row to the height of the header, 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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/208439/de65f151ce927369d3dd/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

4 0
收藏该文
已收藏

评论内容:(最多支持255个字符)