Question

从互联网访问了很多网站后，我找不到方法，如何制作填充浏览器窗口的div。首先它应该被隐藏但是在回发时它应该是可见的。此div不是body标记的直接子项，而是放在表行内。我应该使用什么样的CSS，以便它适合窗户。我在Css div下面使用.BodyCover { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }，但对我不起作用。

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

修改

和Html标记在下面，

{{1}}

我怎样才能通过任何一种方式实现这一点意味着我希望让DIV像浮动身体事件一样点按钮。如何通过另一种方式实现这一目标。

Answer 1

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

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

Answer 2

试试这个，为我工作

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

http://jsfiddle.net/jeL3D/

Answer 3

你可以这样做;

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/

Answer 4

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

如何让div填满浏览器窗口

4 个答案: