Question

鸣谢：已多次询问此问题的变化，但要么它们不完全适用，要么我无法让它们起作用。许多其他解决方案没有使用填充，边距或绝对定位的容器。

目标：我的目标是在屏幕中间创建一个弹出窗口或叠加窗口，它在垂直和水平方向上消耗100％的视口，在叠加层和边缘之间使用100px缓冲区可视窗口。叠加层必须包含标题，文本区域和一些链接。 textarea需要使用所有剩余垂直空间和覆盖窗口内的所有可用水平空间。我试图在标题和导航链接之后最大化可查看文本区域的数量。

解决方案，差不多：根据以前的答案，我已经制作了两个几乎满足我在3个主要浏览器中的要求的解决方案：

CodePen - 适用于Chrome和IE11 - 而非Firefox（忽略FF中100％的高度）
CodePen - 适用于Chrome和Firefox - 而非IE11（在IE中将高度折叠为0）
CodePen - 适用于Chrome，Firefox和IE11 - 但需要使用Javascript＆amp; jQuery：（

两种解决方案之间的唯一区别是textarea绝对位于一个而不是（即静态）另一个。

是否可以改进其中任何一种解决方案以适用于所有3种浏览器？是否有更优雅的解决方案仍然提供所有3个浏览器的蒙版，视口叠加，标题，文本区域和链接？

我想避免使用基于JS的解决方案，并尽可能完全依赖HTML / CSS。如果所有其他方法都失败了，我会在加载文档后在JS中设置高度，但是如果可能的话，我想避免这种维护负担。

谢谢！

对于参考，这里是HTML和CSS：

HTML

<div id="main_content">Hello, world!  I am content underneath overlay.</div>
<div id="mask"></div>
<div id="overlay_window">
    <table>
        <tbody>
            <tr id="heading">
                <td colspan="2"><h1>Heading</h1></td>
            </tr>
            <tr>
                <td colspan="2"><textarea>default value</textarea></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><a id="hide">Hide</a></td>
                <td><a id="next">Next</a></td>
            </tr>
        </tfoot>
    </table>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#mask {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0.6;
    MozOpacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #000;
    width: 100%;
    height: 100%;
    color: #FFF;
    text-align: center;
    z-index: 990;
    font-weight: bold;
    cursor: progress;
}
#overlay_window {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    overflow: hidden;
    z-index: 999;
    margin: 100px;
    padding: 25px;
    background: white;
    border: 2px solid black;
}
table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    text-align: center;
}
thead, tr#heading, tfoot {
    height: 40px;
}
td {
    border: 1px solid red;
    position: relative;
}
textarea {
    /* position: absolute; */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Javascript / jQuery解决方案

我想避免这种情况，但这是一个简单的Javascript / jQuery代码段，用于修复Firefox的高度：

$(document).ready(function() {
  var ta = $('textarea');
  var td = ta.closest('td');
  // if textarea's height less than 80% of parent, set to parent's height.
  if (ta.height() < td.height() * 0.8) {
        ta.height(td.height());
    }
});

参考

Answer 1

使用flexbox的此解决方案适用于IE11，FF和Chrome：http://codepen.io/anon/pen/gbjpOJ

出于某种原因，在桌子内部它不起作用，但在div内部却起作用。我为您所做的textarea使用相同的CSS：

textarea {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
}

但是使用display：flex作为包装器。请参阅codepen以获得完整的解决方案如果您检查版本中IE11中<td>周围的<textarea>，则无法计算元素的高度。我假设他们在他们的渲染引擎中做了一些事情基本上说＆＃34;占用所有剩余的垂直空间＆＃34;而不是计算实际的像素值。但是，当您使用flexbox时，它会计算容器的像素宽度和高度，以便height: 100%在子元素上正常工作。

textarea填充其他元素之后未使用的垂直空间 - 覆盖

HTML

CSS

Javascript / jQuery解决方案

参考

1 个答案: