Question

我正在尝试使一些图形元素像可调整大小的Finder或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;

}

这是JSFiddle的链接：http://jsfiddle.net/kgT5T/

Answer 1

您可以通过（ab）使用绝对定位来获得您正在寻找的效果。

这是一个JSBin演示：http://jsbin.com/jovutace/1/

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规则设置<html>和<body>元素的大小以占用完整视图端口。 margin和padding声明会删除任何特定于浏览器的样式（当然，我建议完全重置CSS。）

第二条规则将.window div设置为具有绝对定位，然后有效地将每一边与该边缘相差15个像素。

我通常不建议使用绝对定位，但无论出于何种原因，当您在height: 100%; width:100%;上使用相对定位和.window时会发生一些奇怪的行为。

在JSBin演示中，为了对比目的，我将HTML背景设置为黄色，这样当您更改窗口大小时，更容易看到图像边缘的位置。

Answer 2

<强> http://jsfiddle.net/G6v9G/1/

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);
}

＆LT; div>顺便说一句，这是你的窗户。

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

否则，只需记住＆＃34; position：absolute;＆＃34; - 但是＆＃34;位置：固定;＆＃34;也似乎适用于您的情况。看看吧。

P.S。：为什么＆lt;身体＆gt;元素有＆＃34;边距：0;＆＃34;？忘掉它吧，因为默认情况下webkit浏览器会将一些边距添加到＆lt;身体＆gt;。请记住使用CSS重置：http://meyerweb.com/eric/tools/css/reset/（许多之一）

全屏元素调整为视口大小

2 个答案: