Question

如何将css中的宽度和高度值分别指定为屏幕的宽度和高度。我尝试了下面的CSS，但现在为我工作。

.classname
 {
     height:100%;
     width:100%;
 }

修改

我也使用了Jquery代码

 $("#PanelGrid").width = $(window).width();

但是不起作用。

这是代码。

<table style="font-family: calibri; height: 100%;" border="0px" cellpadding="0" cellspacing="0"
    width="100%">

   <tr>
        <td style="font-family: Calibri">
            <div id="PanelGrid" style="overflow:auto;"> </td>
   <tr></table>

请帮忙。

Answer 1

CSS中的百分比高度是一件有趣的事情。转到这个小提琴http://jsfiddle.net/b5ww2/5/并尝试执行以下操作：

1

#div1 {
    height: 100%;
    position: absolute;
}

2

#div1 {
    height: 50%;
    position: absolute;
}

3

#div1 {
    height: 100%;
}

4

#div1 {
    height: 50%;
}

您应该看到结果：当定位是正常的（静态）时，元素的百分比高度实际上与其父级的高度有关。当您使用绝对定位时，视口（屏幕）充当元素的父级，您可以按预期使用百分比高度。

因此，如果您知道元素的包含块相对于视口的绝对高度的高度，则可以相应地调整百分比高度。否则，您可能需要使用绝对定位并处理随后的副作用。

Answer 2

如果具有.classname类的元素具有父元素，则它将使用100％的父元素的高度和宽度而不是浏览器窗口。

尝试使用绝对定位强制执行like in this example。

Answer 3

如果你试图使用div来占用窗口的整个高度和宽度，并且总是使用整个高度/宽度，即使浏览器大小已经改变，你可以尝试：< / p>

.classname {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:0;
}

这会将容器的外边界对着视口的边缘。

希望有所帮助。

在css中指定屏幕的宽度和高度属性

3 个答案: