css的vh和margin

我将html和body设置为100vh
但是在body里面设置margin的时候会出现滚动条

<!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

阅读 3.8k
2 个回答

1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素

 属性为:content:"";
  overflow:hidden;

margin-top的bug,子元素的margin-top会渗透到父级,你写的.s,实际上p也有了margin-top,改用padding吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏