HTML: 如何将子元素的宽度设置为浏览器窗口的宽度？

Question

我想在浏览器窗口中显示html页面的一个子元素..换句话说，我想将其放大并在加载后调整大小后保持与浏览器窗口相同大小。

我想知道是否需要将此对象移出父元素，还是可以使用css设置这些属性。

目前，如果我设置width：100％和height：100％，它会适应父级（当然），而不是窗口。

谢谢

- aneuryzm

Answer 1

在可能的情况下，最好使用相对定位，任何大的子元素应该等于父元素。但您始终可以将其绝对定位：

position:absolute;
width:100%;
height:100%;
left:0px;
top: 0px;

- drharris

---

没有 left:0px 和 top:0px，它根本不起作用。 - aneuryzm

我要注意的是，height:100%几乎不符合浏览器的通用性。我很确定在Firefox或Safari中从未遇到过问题，但是我看到许多浏览器完全破坏了高度计算。因此，如果你想要一致性，可能需要真正努力去做。只是供参考。 - drharris

Answer 2

设置宽度很简单：

width: 100%;

对于高度，您需要像这样的东西：

使用CSS实现100％高度布局

- Andrew Bullock

Answer 3

宽度始终是相对于父元素而言的。您可以使用绝对定位使该特定元素“脱离”其父元素（就位置和流动而言），并将其设置为100％。但要小心，它可能不会在您希望的视觉位置结束。

.someElement {
    position: absolute;
    width: 100%;
    height: 400px;
}

若要使此功能起效，父元素不能指定 "position:relative"。

- jeanreis