在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ css的vh和margin

css的vh和margin

我將html和body設(shè)置為100vh
但是在body里面設(shè)置margin的時候會出現(xiàn)滾動條

<!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">
        文字內(nèi)容
      </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

回答
編輯回答
負我心

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

 屬性為:content:"";
  overflow:hidden;
2017年4月1日 01:41
編輯回答
不二心

margin-top的bug，子元素的margin-top會滲透到父級，你寫的.s，實際上p也有了margin-top,改用padding吧

2017年6月3日 21:30