如何让div充满浏览器窗口

Question

从互联网上访问了许多网站后，我找不到方法，如何制作一个充满浏览器窗口的

div

。首先它应该是隐藏的，但在回发时它应该是可见的。该 div 不是

body

标签的直接子级，而是放置在表格行内。我应该应用什么样的CSS，以便它能够适合窗口。我在下面使用了

Css

来表示

div

，但对我不起作用。

 .BodyCover { position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  }

编辑

Html 标记如下，

 <table>
     <tr>
        <td>Content</td>
    </tr>
     <tr>
        <td>Content</td>
    </tr>
    <tr>
        <td><div class="BodyCover "></div></td>
    </tr>
</table>

我怎样才能通过任何一种方式实现这一点意味着我想要让 DIV 像浮动在主体事件上一些按钮点击一样。这怎么可能通过其他方式实现。

Answer 1

基于百分比的宽度和高度是相对于包装元素的（顺便说一下，绝对位置也是如此），所以如果你希望你的 div 覆盖整个 body，你别无选择，只能让它成为 body 的直接后代，或者使用javascript 手动更改 div 的大小和位置。

有趣的问题是为什么你希望 div 成为表格的一部分但覆盖整个屏幕......

Answer 2

试试这个，对我有用

.BodyCover { 
position: absolute;
top: 0;
right: 0;
bottom:0;
left:0;
}​

http://jsfiddle.net/jeL3D/

Answer 3

您现在可以分别使用视口高度和视口宽度 - vh 和 vw。 例如，100vh 填充视口窗口的高度。

Answer 4

你可以用;

body {
  height: 100%;
  margin: 0;
}

.full {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F00;
  position: absolute;
  visibility: hidden;
}

<table border="1">
   <tr>
      <td id="rw"><div class="full" id="dv">text here</div>click</td>
            <td><div>text1</div></td>
   </tr>
   <tr>
      <td><div>text2</div></td>
      <td><div>text3</div></td>
   </tr>
</table>

http://jsfiddle.net/MvtYU/19/