我正在尝试构建具有以下结构的 HTML 页面:
(it's not actual `HTML` code, just to demonstrate the structure)
...
<body>
<header>
<container>
<content-container>
</body>
...
我正在使用 CSS 中的标准网格，并试图弄清楚如何才能获得想要的结果。我坚持使用嵌套的可滚动容器 (content-container)，它显示了 y 滚动条，但它不起作用，页面显示第二个(主)滚动条正在工作。
你可以在这里看到我的例子:https://angular-daidbs.stackblitz.io
如果我将静态的高度设置为某个值(比如 100px)，这个问题可以得到解决，但我希望它位于页眉之后(如果页眉增长则自动移动)直到页面末尾。
卡片 - 元素的样式。
这是我当前的 CSS:
.main-grid {
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: 10px;
}
.header {
border: 1px solid;
}
.content {
border: 1px solid;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
justify-items: center;
}
.content-container {
display: grid;
grid-row-gap: 10px;
justify-items: center;
overflow-y: scroll;
}
.card{
border: 1px solid red;
width: 80%;
height: 100px;
}
这就是我要构建的 View :在我希望有滚动条的地方用绿色显示。
最佳答案
Html + CSS 解决方案可满足您的一个要求，即您将按照自己的方式获得滚动条。但是，如果标题的高度发生变化，您将需要 JavaScript 来计算标题 div 的高度，然后减去它。
如果要使用 overflow-y: scroll 属性，则需要提供高度。在您的情况下，我们可以将 container 的高度计算为(页面高度 - 标题高度)。使用 vh 和 calc() css 函数可以实现这一点。
edit1: Added the js to dynamically calculate the height of header.
function cal_height() {
var h_height = document.getElementById("header").offsetHeight;
var container = document.getElementById("container");
container.style.cssText = "height: calc(100vh - " + h_height + "px);";
}
window.onload = cal_height;* {
box-sizing: border-box;
}
body {
margin: 0;padding: 0;
}
header {
border: 1px solid black;
padding: 30px;
}
.container {
overflow-y: scroll;
}
.content-container {
margin: 20px 50px;
height: 50px;
border: 1px solid;
overflow-y: scroll;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">This is a header</header>
<div class="container" id="container">
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
<div class="content-container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quas delectus, amet ea, doloremque maxime ipsam voluptate harum quaerat sint corrupti praesentium. Ut et dicta ducimus dolore vitae odit! Est?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga et veniam inventore mollitia quis voluptate odio consectetur quia tenetur, nemo error rem quae esse, cumque doloribus fugit! Autem, quod laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates tenetur, odio iusto impedit temporibus voluptas veniam necessitatibus consectetur ullam tempora, culpa, cumque dolores. Sit, incidunt repudiandae? Error ut ad maiores.
</div>
</div>
<script src="js.js"></script>
</body>
</html>关于html - 在 div 容器中带有滚动条的 CSS 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56131092/