html - 在 div 容器中带有滚动条的 CSS 网格-6ren

html - 在 div 容器中带有滚动条的 CSS 网格

转载作者：行者123 更新时间：2023-11-28 16:57:00

我正在尝试构建具有以下结构的 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/

文章推荐： javascript - html contenteditable 属性

文章推荐： python - Python的Decimal类是可变宽度的吗？

文章推荐： Python 列表组合

文章推荐： python - Pandas 计算数据框行中的日期差异

javascript - 带有 li & ul 的多级下拉列表，带有 PHP 数组循环，带有 CSS 和 jQuery
我想使用 li 和 ul 制作一个多级下拉列表，以便显示我博客中按年和月排序的所有文章。我希望我的下拉菜单看起来像 Google Blogspot 下拉菜单: 这是我的 CSS 和 HTML 代码 u
c++ - 带有 gmp 的代码块，带有 << 运算符和 mp*_class 的段错误
我在 Win 7 64 机器上将 CodeBlocks 与 gcc 4.7.2 和 gmp 5.0.5 结合使用。开始使用 gmpxx 后，我看到一个奇怪的段错误，它不会出现在 +、- 等运算符中，但
javascript - 带有 Tern 的 CodeMirror - 带有 Javascript Intellisense 的自定义 "Types"
我正在使用 tern 为使用 CodeMirror 运行的窗口提供一些增强的智能感知，它工作正常，但我遇到了一个问题，我想添加一些自定义“types”，可以这么说，这样下拉列表中它们旁边就有图标了。我
带有 PC 作为 USB 主机的 Android ADK，带有 libusb，批量传输错误
我正在尝试让我的 PC 成为 Android 2.3.4 设备的 USB 主机，以便能够在不需要实际“附件”的情况下开发 API。为此，我需要将 PC 设置为 USB 主机和“设备”(在我的例子中是运
php - 带有 IIS 的 ASP.NET VS 带有 Apache 的 PHP
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 9
apache - 带有 Apache/Tomcat 多个 DNS 的反向代理，带有 SSL 的单个 Web 应用程序
我在设置服务器方面几乎是个新手，但遇到了一个问题。我有一个 Ubuntu 16.04 VPS 并安装了 Apache2 和 Tomcat7。我正在为 SSL 使用 LetsEncrypt 和 Cert
google-maps - 如何有效地将 Google Maps API V2(带有 MapFragment、Google Map、Marker 等)用于使用 API V1(带有 MapView、GeoPoint 等)的旧应用程序，
我在一个基于谷歌地图的项目上工作了超过 6 个月。我使用的是 Google Maps API V1 及其开发人员 API key 。当我尝试发布应用程序时，我了解到 Google API V1 已被弃
带有@property的Python对象来听写
我是 Python 的新手，所以如果我对一些简单的事情感到困惑，请原谅。我有一个这样的对象: class myObject(object): def __init__(self):
带有#号的javascript对象变量
这个问题已经有答案了: How can I access object properties containing special characters? (2 个回答) 已关闭 9 年前。我正在尝
带有@media的纵向模式和陆地模式的CSS
我有下面的 CSS。我想要的是一种流体/液体(因为缺乏正确的术语)css。我正在为移动设备开发，当我改变模式时从纵向 View 到陆地 View ，我希望它流畅。现在的图像在陆地 View 中效
带有@语法的python装饰器参数
我正在尝试使用可以接受参数的缓存属性装饰器。我查看了这个实现:http://www.daniweb.com/software-development/python/code/217241/a-cac
带有-1作为第三个参数的python双冒号
这个问题在这里已经有了答案: Understanding slicing (36 个答案) 关闭 6 年前。以a = [1,2,3,4,5]为例。根据我的直觉，我认为 a[::-1] 与 a[0:
带有--where子句的mysqldump不起作用
mysqldump -t -u root -p mytestdb mytable --where=datetime LIKE '2014-09%' 这就是我正在做的事情，它会返回: mysqldum
python - 带有 while 循环的销售税计算器
我正在制作销售税计算器，除了总支付金额部分外，其他一切都正常。在我的程序中，我希望能够输入一个数字并获得该项目的税额我还希望能够获得支付的总金额，包括交易中的税金。到目前为止，我编写的代码完成了所有这
带有-hwaccel_output_format的FFMPEG Hwaccel错误
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
带有 Airflow 的电子邮件
我是否必须进行任何额外的设置才能让 apache-airflow 在任务失败时向我发送电子邮件。我的配置文件中有以下内容(与默认值保持不变): [email] email_backend = airf
excel - 带有 $ 的内置字符串函数
这个问题在这里已经有了答案: What does the $ symbol do in VBA? (5 个回答) 3年前关闭。使用返回字符串(如 Left)的内置函数有什么区别吗？或使用与 $ 相同
.net - 带有.NET库的VB6
我有一个用VB6编写的应用程序，我需要使用一个用.NET编写的库。有什么方法可以在我的应用程序上使用该库吗？谢谢最佳答案这取决于。您可以控制.NET库吗？如果是这样，则可以修改您的库，以便可以
raku - 带有 ^ 的类方法名称没有被正确调用
当我创建一个以 ^ 开头的类方法时，我尝试调用它，它给了我一个错误。 class C { method ^test () { "Hi" } } dd C.new.test; Too m
带有 Material 设计的Angularjs无法实例化模块ngMaterial
我已经使用 bower 安装了 angularjs 和 materialjs。凉亭安装 Angular Material 并将“ngMaterial”注入(inject)我的应用程序，但出现此错误。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在 div 容器中带有滚动条的 CSS 网格