textarea fill unused vertical space after other elements - in overlay

Question

Acknowledgement: Variations of this question have been asked several times, but either they do not exactly apply or I cannot get them to work. Many of the other solutions did not use padding, margin, or absolute-positioned containers.

Goal: My goal is to create a popup or overlay window in the middle of the screen, which consumes 100% of the viewport vertically and horizontally with a 100px buffer between the overlay and the edge of the viewable window. The overlay must contain a heading, a textarea, and some links. The textarea needs to consume all the leftover vertical space and all of the available horizontal space inside the overlay window. I'm trying to maximize the amount of viewable textarea after the heading and navigation links.

Solutions, Almost: Based on previous answers, I have made 2 solutions that almost satisfy my requirements in 3 major browsers:

CodePen - Works in Chrome and IE11 - not Firefox (ignores 100% height in FF)
CodePen - Works in Chrome and Firefox - not IE11 (collapses height to 0 in IE)
CodePen - Works in Chrome, Firefox, and IE11 - but requires Javascript & jQuery :(

The only difference between the 2 solutions is that the textarea is absolutely positioned in one and not (i.e., static) the other.

Can either of these solutions be improved to work in all 3 browsers? Is there a more elegant solution that still provides the mask, viewport overlay, heading, textarea, and links for all 3 browsers?

I'd like to avoid a JS-based solution and rely entirely upon HTML/CSS if possible. If all else fails, I'll set the height in JS after the document is loaded, but I'd like to avoid this maintenance burden if possible.

Thanks!

For refrence, here's the HTML and 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 Solution

I'd like to avoid this, but here's a simple Javascript/jQuery snippet that fixes the height for 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());
    }
});

References

Can you try the following in your test: http://codepen.io/anon/pen/YPXwj -> give #overlay_window a height: 100% and position relative, give your mask a position fixed. Let me know if that solved what you wanted. — chdltest, Nov 24 '14 at 19:01
Sorry, also make the tr that contains the text area a height of 100% !important. The is right underneath your heading. If this achieves what you want, I'll explain to you how and why in an answer below. — chdltest, Nov 24 '14 at 19:05
@chdltest - Making the #overlay_window's `height:100%` and `position:relative` blew out the 100px margin between the overlay and the viewport, so this is not an option. Plus, it did not seem to affect the textarea's height. However, setting the textarea-containing-tr's `height:100%` **did** expand the height of the textarea, yet the textarea used the height of the table's **entire** tbody - including the heading row plus a few pixels, not the single tr. ... Incidentally, I had to set the height in the HTML on the element's style regardless of the `!important`; otherwise, it was ignored by FF. — Trevor, Nov 24 '14 at 19:40

score 2 · Answer 1 · answered Mar 02 '15 at 21:46

This solution using flexbox works in IE11, FF, and Chrome: http://codepen.io/anon/pen/gbjpOJ

For some reason, inside of a table it doesn't work but inside of a div it does. I'm using the same CSS for the textarea that you did:

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

but using display: flex for the wrappers. See the codepen for full solution. If you inspect the <td> surrounding the <textarea> in IE11 in your version, it doesn't calculate the height of the element. I'd assume they're doing something in their rendering engine to basically say "take up all remaining vertical space" instead of calculating an actual pixel value. However, when you use flexbox, it calculates a pixel width and a height for the container so height: 100% works correctly on child elements.

textarea fill unused vertical space after other elements - in overlay

HTML

CSS

Javascript / jQuery Solution

References

1 Answers1