html - textarea 在其他元素之后填充未使用的垂直空间 - 在叠加层中

Question

致谢:这个问题的变体已被问过好几次，但要么它们不完全适用，要么我无法让它们工作。许多其他解决方案不使用填充、边距或绝对定位容器。

目标:我的目标是在屏幕中间创建一个弹出窗口或叠加窗口，它在垂直和水平方向上占据 100% 的视口(viewport)，在叠加层和屏幕边缘之间有 100 像素的缓冲区可 window 口。叠加层必须包含标题、文本区域和一些链接。 textarea 需要占用覆盖窗口内所有剩余 垂直空间和所有可用水平空间。我试图在标题和导航链接之后最大化可见文本区域的数量。

解决方案，差不多:根据之前的回答，我做了2个解决方案，几乎满足了我在3个主流浏览器上的要求:

• CodePen - 适用于 Chrome 和 IE11 - 不适用于 Firefox(忽略 FF 中的 100% 高度)
• CodePen - 适用于 Chrome 和 Firefox - 不适用于 IE11(在 IE 中将高度折叠为 0)
• CodePen - 适用于 Chrome、Firefox 和 IE11 - 但需要 Javascript 和 jQuery :(

这两种解决方案之间的唯一区别是文本区域绝对定位在一个而不是(即静态)另一个。

是否可以改进这些解决方案中的任何一个以在所有 3 种浏览器中工作？是否有更优雅的解决方案仍然为所有 3 种浏览器提供 mask 、视口(viewport)覆盖、标题、文本区域和链接？

我想避免使用基于 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());
    }
});

引用资料

• How can I have a textarea take up the remaining height in a div?
• CSS Positioning inside of an HTML Table
• Textarea to fill a parent container exactly, with padding
• Make a <textarea> fill remaining height
• Firefox textarea sizing bug?
• Consistently sizing a <textarea> under IE, FF, Safari/Chrome
• Textarea height: 100%
• Textarea CSS {height: 100%} in table-cell div (IE)
• http://snook.ca/archives/html_and_css/absolute-position-textarea
• http://css-tricks.com/examples/BoxSizing/

Answer 1

这个使用 flexbox 的解决方案适用于 IE11、FF 和 Chrome:http://codepen.io/anon/pen/gbjpOJ

出于某种原因，它在表格内不起作用，但在 div 内却起作用。我为文本区域使用了与您相同的 CSS:

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

但使用 display: flex 作为包装器。有关完整解决方案，请参阅代码笔。如果您检查 <td>周边<textarea>在您的 IE11 版本中，它不会计算元素的高度。我假设他们在他们的渲染引擎中做了一些事情来基本上说“占用所有剩余的垂直空间”而不是计算实际的像素值。但是，当您使用 flexbox 时，它会计算容器的像素宽度 和 高度，因此 height: 100%在子元素上正常工作。