Question

当你将宽度或高度设置为100％时，在CSS中

它实际上只将其设置为浏览器窗口的100％。有没有办法让它成为整页的100％？

让我重新说一下：无论你滚动多少，我都希望这个元素（一个div）占据整个页面。具有100％大小和100％宽度的父元素不起作用，因为它们以相同的方式处理。我开始认为我可能必须使用JS来获取页面的高度，然后绝对定义它。

Answer 1

只需将位置：固定应用于该元素即可。如果这是叠加层：

#overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%; 
}

注意：IE6不支持修复

Answer 2

当您将宽度或高度设置为100％时，它的大小是其父元素的100％。因此，您需要的是围绕页面所有内容的元素，并设置该元素中子项的大小。

编辑：
如果将主体中最外层元素的高度设置为100％，则会发生什么取决于您使用的标记版本。在HTML中，body元素的父元素是视口，默认情况下高度为100％，因此您的元素将是窗口的大小。在XHTML中，body元素的父元素是html元素，body元素的高度是页面中实际内容的高度。

Answer 3

如果元素的大小不是绝对大小（例如600px）或包含在另一个大小的元素中，则100％宽度将是浏览器窗口的宽度。

页面的高度取决于内容垂直占用的空间大小。

因此，如果你想要某些东西覆盖一定的空间，创建一个宽度和高度设置为像素或ems的元素（即<div>），那么其中的元素设置为100％将填写那个。

Answer 4

我将完成每个人的答案....你需要为body制作一个样式并应用保证金：0;填充：0;

像这样：

body{
 margin:0;
 padding:0;
}

在此之后，您可以将width:100%和height:100%应用于您喜欢的每个DIV。

祝你好运

Answer 5

如果是叠加层，您可以考虑以下CSS代码段：

#overlay 
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

这假设页面上还有其他元素来定义它的尺寸

Answer 6

这取决于，如果你把一些元素放在div和table / div中，div的高度是假设为500px那么其中高度为100％的元素将与此div一样多。

如果你想让一些元素适合整个页面，你必须将它放在一个具有浏览器实际100％的元素下，例如这通常是包含表格或父div的元素。

修改

我没有在下面试过，但你也可以这样使用绝对定位：

<style type="text/css"> div { position:absolute; top:0px; left:0px; width:100%; height:100%; } </style>

但这种方法并不总是那么理想。如果您确定，可以实现：）

如何使身高真正达到100％

6 个答案: