制作高度和宽度100％的设备

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

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

好吧，所以问题是当我使用100％或vh与余量溢出，我不能使用隐藏cuz我需要底部部分，现在宽度可以，因为它的显示块，修复宽度问题。

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

2016-11-19 potato

尝试的高度和宽度自动 –

尝试

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

来源

2016-11-19 09:13:53

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

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

来源

2016-11-19 09:21:52

我需要空间。 – potato

你能告诉我你想要什么样的屏幕？所以我帮你。 –

带页边空白的全屏登陆页面，不滚动 – potato

你必须使用box-sizing: border-box;随着width: 100vw;和height; 100vh;

来源

2016-11-19 09:24:11

适用于填充不是边距，仍然存在边距溢出 – potato

也不允许填充到底部 – potato

您需要的边距是多少？您可能需要采取一种解决方法才能使其发挥作用。 –

请勿在身体上使用边距，而应使用父/子元素并在父级上设置填充。边距不在元素中，因此在计算中不考虑 - 因为它是宽度/高度的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; 
}

来源

2016-11-19 09:32:05 ryansin

使用填充和框大小来解决问题。我更新了的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>

来源

2016-11-21 17:48:42 pulekies

制作高度和宽度100％的设备

回答

相关问题