如何正确停止溢出并保持响应性

Question

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

我能想到的另一个解决方案是明确地向 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>

Answer 1

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

溢出

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

编辑评论中提到的 ~，结果相同，但未设置页眉高度。删除所有高度，并将 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>

如何正确停止溢出并保持响应性

How to correctly stop overflowing and maintain the responsiveness

html

css

flexbox

css-grid