CSS弹出层大小相对于窗口大小答案

【问题标题】：CSS popup layer size relative to window sizeCSS弹出层大小相对于窗口大小
【发布时间】：2013-08-07 17:14:55
【问题描述】：

我当前使用的弹出窗口的工作示例如下：

基于这个解决方案：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，我尝试将其设置为百分比，但结果不可接受。我至少需要在窗口高度的 % 中设置高度。知道如何完成这项任务吗？没有Javascript可以吗？

【问题讨论】：

所以你想让弹出窗口占据整个页面？或者只是为弹出窗口设置一个百分比？
是的，当我尝试设置% 值时，滚动被破坏了

标签： html css popup

【解决方案1】：

如果您需要模态框（弹出窗口）的宽度和高度（以 % 为单位）这是简单的方法。 [http://jsfiddle.net/achr3f/98MBD/][1]

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

【讨论】：