Question

我希望身体有15px的边距并且保持100％的窗户高度和宽度，100 vh是同样的事情。

我想要一个适合屏幕的欢迎屏幕（用户的分辨率），所以当用户调整窗口大小时，身体应该自己调整屏幕高度和宽度。

好的，所以问题是当我使用100％或者带边距溢出时，我无法使用隐藏的cuz我需要底部，现在它的宽度可以，因为它的显示块可以解决宽度问题。

h https://jsfiddle.net/0dx36zb4/

Answer 1

尝试

body {
  width: 100vw;
  height: 100vh;
}

Answer 2

您必须使用box-sizing: border-box;以及width: 100vw;和height; 100vh;

Answer 3

＆＃13;

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    border: 0;
    overflow: hidden;
}
.splash {
    height: 100%;
    width: 100%;
    z-index: 0;
}

＆＃13;

<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg  
   " class="splash" />

＆＃13;

Answer 4

不要在身体上使用边距，而是使用父/子元素并在父级上设置填充。边距在元素之外，因此在计算中不予考虑 - 您的溢出因为它是宽度/高度的100％，加上每个方向15px。填充在元素内部，您可以设置浏览器以使用box-sizing:border-box属性在宽度/高度规范中考虑它。

<强> HTML

<html>
    <body>
        <div id="parent">
             <div id="child">
             </div>
        </div>
    </body>
</html>

<强> CSS

body {
    width:100vw;
    height:100vh;
}

#parent {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width:100%;
    height:100%;
    padding:15px;
    margin:0;
}

#child {
    width:100%;
    height:100%;
    margin:0;
}

修改

我还能够让你的JSFiddle工作，所以你可以看到一个例子，如果你用下面的代码替换你的代码。

html,body { background-color: red; height: 100%; margin:0; padding:15px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } section { background-color: yellow; height: 100%; margin: 0; }

Answer 5

使用填充和大小调整来解决问题。我更新了你的JSFiddle工作：

https://jsfiddle.net/0dx36zb4/4/

  
html,body {
  background-color: red;
  height: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

body {
  padding:15px;
  margin: 0;
}

section {
  background-color: yellow;
  height: 100%; 
}

h1 {
  margin: 0;
  padding: 0;
}

<body>
  <section>
  <h1>hello</h1>
  </section>
</body>

使高度和宽度达到设备的100％

5 个答案: