发布于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.
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.
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/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!