Question

我正在制作一个网站here，并且我使用css作为卡片容器，但是当它在较小的屏幕上查看或当卡片不适合一页时，我无法上下滚动。我已经查看了滚动行为并进行了尝试，但即使使用“自动”功能，也无法更改它。我正在使用chrome进行测试。

这里是示例：

.grid-container {
  display: grid;
  grid-gap: 1px;
  padding: 1px;
  align-content: space-evenly;
  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

<!DOCTYPE html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@nimiq/style@v0.8.2/nimiq-style.min.css" rel="stylesheet">
</head>
<div class="grid-container">
  <div class="nq-card">
    <div class="nq-card-header">
      <button class="nq-button light-blue">Test</button>
    </div>
  </div>
  <div class="nq-card">
    <div class="nq-card-header">
      <button class="nq-button light-blue">Test</button>
    </div>
  </div>
  <div class="nq-card">
    <div class="nq-card-header">
      <button class="nq-button light-blue">Test</button>
    </div>
  </div>
  <div class="nq-card">
    <div class="nq-card-header">
      <button class="nq-button light-blue">Test</button>
    </div>
  </div>
</div>

Answer 1

具有正确结构的此代码段在SO上运行良好，并在浏览器中“实时”运行...

在（完整的）运行代码中，<html>和<body>的CSS都设置为overflow: hidden。删除/禁用该CSS（.stuck上使用的类body），您应该可以滚动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">

<title>SO62866913</title>

  <link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@nimiq/style@v0.8.2/nimiq-style.min.css" rel="stylesheet">

<style>
.grid-container {
  display: grid;
  grid-gap: 1px;
  padding: 1px;
  align-content: space-evenly;
  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
</style>

</head>

<body>
    <div class="grid-container">
        <div class="nq-card">
            <div class="nq-card-header">
                <button class="nq-button light-blue">Test</button>
            </div>
        </div>
        <div class="nq-card">
            <div class="nq-card-header">
                <button class="nq-button light-blue">Test</button>
            </div>
        </div>
        <div class="nq-card">
            <div class="nq-card-header">
                <button class="nq-button light-blue">Test</button>
            </div>
        </div>
        <div class="nq-card">
            <div class="nq-card-header">
                <button class="nq-button light-blue">Test</button>
            </div>
        </div>
    </div>
</body>
</html>

即使有溢出也无法滚动页面

1 个答案: