如何正确停止溢出并保持响应能力答案

【问题标题】：How to correctly stop overflowing and maintain the responsiveness如何正确停止溢出并保持响应能力
【发布时间】：2022-02-12 02:04:27
【问题描述】：

我使用 flexbox 制作了一个粘性标题，然后使用网格作为正文。但是将高度应用于网格项会使页面溢出，这是我不想要的。我想我可以通过calc(100vh - the height of header) 解决这个溢出问题，但如果我将分辨率更改为移动设备的分辨率，最终标题的高度会发生变化，从而使新高度无用。

我能想到的另一个解决方案是显式向标题添加高度，但我认为这不是解决我的问题的正确方法 https://codepen.io/iwantroca-the-flexboxer/pen/ZEayyqp

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  font-size: 17px;
  font-family: poppins;
}

body {
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgb(139, 48, 48);
  color: white;
}

header>h2 {
  font-style: italic;
  font-weight: lighter;
  margin-left: 3em;
}

.app_logo {
  font-size: 2.3em;
  margin-right: 10px;
  color: rgba(187, 190, 136, 0.774);
}


/* MAIN */

main {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

#projects_bar {
  background: red;
  height: 100vh;
}

#tasks_bar {
  background: yellow;
}

<!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" />
  <title>Todo-App</title>
</head>

<body>
  <header>
    <i class="fa-solid fa-check-double app_logo"></i>
    <h1>Todo App</h1>
    <h2>Get things done</h2>
  </header>
  <main>
    <nav id="projects_bar">
      <h2>Projects</h2>
    </nav>
    <div id="tasks_bar">
      <h2>Tasks</h2>
    </div>
  </main>
</body>

</html>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

以您当前的结构，为什么不直接制作header 10vh 和main 90vh。这意味着#projects_bar 和#tasks_bar 也将是 90vh，因为 100vh（您之前拥有的）会导致 y 轴溢出。

你也可以在body上加上overflow-y: hidden;，让它在切换设备类型时不滚动。

Edit ~ 在 cmets 中提到，结果相同，但没有为 header 设置高度。删除所有高度，并将body 上的高度设置为100vh。 min-height: 100vh; 与 height: 100vh; 不同，因此您需要先建立它。然后您可以将height: 100%; 设置为main，它将填充剩余的视口。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  font-size: 17px;
  font-family: poppins;
}

body {
  height: 100vh;
  min-height: 100vh;
  overflow-y: hidden;
}

header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgb(139, 48, 48);
  color: white;
}

header>h2 {
  font-style: italic;
  font-weight: lighter;
  margin-left: 3em;
}

.app_logo {
  font-size: 2.3em;
  margin-right: 10px;
  color: rgba(187, 190, 136, 0.774);
}


/* MAIN */

main {
  display: grid;
  grid-template-columns: 1fr 4fr;
  height: 100%;
}

#projects_bar {
  background: red;
}

#tasks_bar {
  background: yellow;
}

<!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" />
  <title>Todo-App</title>
</head>

<body>
  <header>
    <i class="fa-solid fa-check-double app_logo"></i>
    <h1>Todo App</h1>
    <h2>Get things done</h2>
  </header>
  <main>
    <nav id="projects_bar">
      <h2>Projects</h2>
    </nav>
    <div id="tasks_bar">
      <h2>Tasks</h2>
    </div>
  </main>
</body>

</html>

【讨论】：

之前我正在查看一些模板，当我看到它们工作正常而没有任何高度设置为页眉并且始终保持响应时感到困惑。
@Iwantroca 是的，查看编辑！
@Iwantroca 如果您有任何问题，请不要害羞。
非常感谢您的帮助。多亏了你，我才明白了一点。现在我正在进一步设计应用程序。