全屏元素调整为视口大小答案

【问题标题】：Fullscreen element adjust to viewport size全屏元素调整为视口大小
【发布时间】：2014-09-01 08:38:33
【问题描述】：

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

【问题讨论】：

我看不出你在描述什么。在 Chrome 上，使用html, body{ height: 100%; width:100%;}，它会增长到完整的窗口大小，并且除了右侧之外的所有内容都有 15px 的边距。不过，不确定右边距是怎么回事。
在 jsfddles 中包含 body 标签，我假设你的意思是 </section> 这是一个更新的小提琴 jsfiddle.net/kgT5T/1

标签： html css graphic

【解决方案1】：

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

是你的窗口，顺便说一下。

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

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

P.S.：为什么

元素有“margin: 0;”？算了，这是因为默认情况下 webkit 浏览器会在中添加 some 边距。记得使用 CSS 重置：http://meyerweb.com/eric/tools/css/reset/（众多之一）

【讨论】：

【解决方案2】：

你可以通过（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 像素。

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

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

【讨论】：

我想我们赢了，忘记我的回答吧。就像我忘了用简单的绝对定位可以做多少事情，左右上下......
@bardzusny 实际上，我喜欢你的回答。我根本没想过使用calc()，但如果您不介意IE prior to 9 doesn't support it fully 的事实，这是一个不错的选择。
感谢您的帮助！如果你好奇的话，这就是结果。 jsbin.com/jovutace/2
不错！这很甜蜜。感谢分享。 :)