html - CSS 弹出层大小相对于窗口大小

Question

我目前使用的弹出窗口的工作示例在这里:

http://jsfiddle.net/UUZpM/1/

它基于这个解决方案:http://blog.avtex.com/2012/01/26/cross-browser-css-only-modal-box/

HTML:

<div class="viewbox popupBoxWrap">
    <div class="vertical-offset">
        <div class="popupBox">
        <form style="height:300px">
        <table>
            <tr><td>key</td><td>val</td></tr>
            ....
        </table>
        </form>
        </div>
    </div>
</div>

CSS:

.popupBoxWrap {
    z-index:40001;
}

.vertical-offset { /* Fixed position to provide the vertical offset */
    position:fixed;
    top:5%;
    width:100%;
    z-index:40002; /* ensures box appears above overlay */
}
.popupBox { /* The actual box, centered in the fixed-position div */
    width:300px; /* Whatever width you want the box to be */
    position:relative;
    margin:0 auto;

    background-color:white;
    padding:10px;
    border:1px solid black;
}

.popupBox form {
    overflow: auto;
}

但是正如您所见，此弹出窗口的高度设置为固定值 300px，我尝试将其设置为百分比，但结果 Not Acceptable 。我至少需要将高度设置为窗口高度的 %。知道如何完成这项任务吗？可以不用 Javascript 吗？

Answer 1

如果你需要你的模式(弹出窗口)有宽度和高度的百分比这是简单的方法。 [http://jsfiddle.net/achr3f/98MBD/][1]

当然，使用 JS，您可以通过在页面加载后或调整大小后更改 Css 属性，使高度(或宽度)取决于窗口分辨率