How to correctly stop overflowing and maintain the responsiveness-CodePudding

I have made a sticky header using flexbox then using a grid for the body. But applying height to grid items makes the page overflow which I don't want. I have figured I can solve this overflowing by calc(100vh - the height of header) but eventually the height of the header will change if I change the resolution to that of mobile making the new height useless.

The other solution I can think of is by explicitly adding a height to the header but I think that is not the right solution to my problem 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 ></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>

CodePudding user response：

With your current structure why not just make header 10vh and main 90vh. This means that #projects_bar and #tasks_bar will also be 90vh also because 100vh (what you previously had) will cause overflow on the y-axis.

You can also add overflow-y: hidden; on the body to make it not scroll when switching device types.

Edit ~ mentioned in comments, same result without setting a height to the header. Remove all heights, and set height on body to 100vh. min-height: 100vh; is not the same as height: 100vh; so you need to establish that first. Then you can just set height: 100%; to main, and it will fill the remaining viewport.

* {
  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 ></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>