时间戳

首页 > 解决方案 > div-contaier 中带有滚动条的 CSS 网格

html - div-contaier 中带有滚动条的 CSS 网格

问题描述

我正在尝试构建HTML具有以下结构的页面：

(it's not actual `HTML` code, just to demonstrate the structure)
...
<body>
  <header> 
  <container>
    <content-container>
</body>
...

我正在使用标准 GridCSS并试图弄清楚我怎样才能得到希望的结果。我坚持使用嵌套的可滚​​动容器（内容容器），它向我显示 y 滚动条，但它不起作用，页面显示第二个（主）滚动条正在工作。

你可以在这里看到我的例子：https ://angular-daidbs.stackblitz.io

如果我将静态的高度设置为某个值（假设为 100 像素），则可以解决此问题，但我希望它位于页眉之后（如果页眉增长则自动移动），直到页面末尾。

卡片 - 物品的样式。

这是我当前的 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;
}

这就是我正在尝试构建的视图：绿色是我想要滚动条的地方。

在此处输入图像描述

标签： htmlcsscss-grid

解决方案

Html + CSS 解决方案满足您的一项要求，即您将以您想要的方式获得滚动条。但是，如果标题的高度发生变化，您将需要 JavaScript 来计算标题 div 的高度，然后减去它。

如果你想使用overflow-y: scroll 属性，你确实需要给出高度。在您的情况下，我们可以计算containeras 的高度（页面高度 - 标题高度）。使用vh和calc()css 函数可以实现这一点。

edit1：添加了动态计算标题高度的js。

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>

推荐阅读