0

如何将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>

请帮忙。

4

3 回答 3

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%;
}​

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

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

于 2012-12-05T13:56:18.313 回答
1

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

尝试使用绝对定位强制它，就像在这个例子中一样。

于 2012-12-05T14:02:46.617 回答
0

如果您试图使 div 用完窗口的全部高度和宽度，并且即使浏览器大小发生更改也始终使用全部高度/宽度，您可以尝试：

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

这会将容器的外部边界放在视口的边缘。

希望有帮助。

于 2012-12-05T14:25:58.487 回答