Forcing elements to contain to 100vh-CodePudding

Why is the viewport not listening to the `height: 100vh' and still pushing the content to beyond it?

What is the best practise to achieve this without having to hardcode something like calc(100vh - 21px)?

Edit: margin seemed to be the issue here indeed. My working example is hard to find the margin because it uses ionic shadow dom elements and has loads of hidden CSS. I will try to backward engineer it tomorrow and try to find the problem. And publish the answer here with a better code example.

body, html {height:100%; margin:0; padding: 0;}

menu {
  background-color: hsl(206, 68%, 96%);
  width: 50%;
  height: 100vh;
  
  display: flex;
  flex-direction: column;
}

header {
  background-color: hsl(206, 68%, 60%);
}

nav {
  overflow-y: auto;
  background-color: hsl(206, 68%, 40%)
}

footer {
  margin-top: auto;
  background-color: hsl(206, 68%, 60%);
}

<menu> 
  <header>
    Header
  </header>
  
  <nav>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </nav>
  
  <footer>
    Footer
  </footer>
  
</menu>

CodePudding user response：

Add margin: 0; to menu to remove any default margin added by the browser:

body, html {height:100%; margin:0; padding: 0;}

menu {
  background-color: hsl(206, 68%, 96%);
  width: 50%;
  height: 100vh;
  
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  background-color: hsl(206, 68%, 60%);;
}

footer {
  margin-top: auto;
  background-color: hsl(206, 68%, 60%);
}

<menu> 
  <header>
    Header
  </header>
  
  <nav>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </nav>
  
  <footer>
    Footer
  </footer>
  
</menu>

CodePudding user response：

Remove the margin, from the parent div and make that container stay outside of the div that you want to give a margin, something like this:

body {
 margin: 0px;
}

.sidebar {
 height: 100vh;
 width: 100px;
 position: fixed;
 background-color: red;
}

.container {
 width: 500px;
 margin-left: 150px;
 border: 1px solid black;
}

.item {
 height: 100px;
 width: 100px;
 background-color: blue;
 margin-bottom: 10px;
}

<div ></div>
<div >
<div > im on the side </div>
<div > im on the side </div>
<div > im on the side </div>
</div>

CodePudding user response：

Just add margin:0 in menu element

body, html {height:100%; margin:0; padding: 0;}

menu {
  background-color: hsl(206, 68%, 96%);
  width: 50%;
  height: 100vh;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

header {
  background-color: hsl(206, 68%, 60%);
}

nav {
  overflow-y: auto;
  background-color: hsl(206, 68%, 40%)
}

footer {
  margin-top: auto;
  background-color: hsl(206, 68%, 60%);
}

<menu> 
  <header>
    Header
  </header>
  
  <nav>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </nav>
  
  <footer>
    Footer
  </footer>
  
</menu>