Html 全屏元素调整到视口大小

我正在尝试让一些图形元素像可调整大小的查找器或Windows资源管理器窗口一样工作。。。与您在计算机屏幕上打开和关闭的屏幕没有区别。窗口基本上是视口的100%，但每边都有15px的边距

根据我在这里的编码，.window只是根据其中内容的大小进行调整，而不是按照设置的边距100%填充视口。我是一个傻瓜，但我觉得这与将身体/头部高度/宽度设置为100%有关。不管怎样，我做错了什么

.window {
background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
width:100%;
height:100%;
margin: 15px 15px 15px 15px;

}

这里有一个指向JSFIDLE的链接：

div {
    background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
    margin: 15px;
    position: absolute;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
}

顺便说一下，

是你的窗口

我们正在使用非常新的东西，calc（）…为什么？您需要按百分比设置页边距（左边距+窗口+右边距=100%），或者依靠使用现代浏览器的用户

否则，只需记住“位置：绝对；”——但“位置：固定”；似乎也适用于您的情况。看看吧

---

问题：为什么元素有“边距：0；”？忘了它吧，这是因为默认情况下，webkit浏览器为添加了一些边距。请记住使用CSS重置：（许多中的一个）

您可以通过使用绝对定位（ab）来获得想要的效果

下面是一个JSBin演示：

CSS就是这样：

html, body {
    height: 100%;
    width: 100%;
    margin: 0; padding: 0;
}

.window {
    background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    position: absolute;
}

第一个CSS规则设置占用全视图端口的

和

元素的大小。

margin

和

padding

声明删除了任何特定于浏览器的样式（当然，我建议完全重置CSS）

第二条规则将

.window

div设置为绝对定位，然后有效地将每侧距该边缘15个像素

我通常不建议使用绝对定位，但无论出于何种原因，当您使用相对定位和

height:100%时，会出现一些奇怪的行为；宽度：100%窗口上的code>

在JSBin演示中，为了对比起见，我将HTML背景设置为黄色，以便在更改窗口大小时更容易看到图像边缘的位置。
我看不到您所描述的内容。在Chrome上，使用
html，主体{height:100%；width:100%；}
，这将扩展到整个窗口大小，除了右侧之外，所有窗口都有15px的边距。不过，我不确定右边距有什么问题。主体标记包含在JSFDLS中，我猜你的意思是
，这是一个更新的提琴，我想我们赢了，忘了我的答案吧。就像我忘记了简单的绝对定位可以做多少事情，左右、上下……@bardzusny实际上我喜欢你的答案。我根本没有想过使用
calc（）
，但是如果你不介意的话，这是一个很好的选择。谢谢你的帮助！如果你好奇的话，这就是结果。美好的那太好了。谢谢分享。：）