Vh and margin of css

I set html and body to 100vh
but scroll bars appear when setting margin in body 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="app">
    <div class="f">
      <div class="s">
        
      </div>
    </div>
    <div class="f2">
    </div>
  </div>
</body>

<style>
  html,
  body,
  .app {
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  * {
    box-sizing: border-box;
  }

  .app {
    height: 100%;
  }

  .s {
    margin: 10px 0;
    padding: 10px 10px;
    background-color: red;
  }

  .f2 {
    height: 50px;
    background-color: green;
  }
</style>

</html>

codepen

Css3 css
Mar.17,2021

1. Add border
2 to the parent box. Add padding-top
3 to the parent box Add overflow:hidden
4 to the parent box Parent box: position:fixed
5. Parent box: display:table
6. Add a sibling element to the front of the child element 

 :content:"";
  overflow:hidden;

the margin-top of the bug, child element of margin-top will infiltrate into the parent. The .s you wrote, in fact, p has margin-top, and switch to padding

.

Previous: Mini Program's question of asynchronously obtaining wx.request data

Next: Error compressing packaged resources with WEBPACK

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu