bottom: 0 doesn't work in Firefox with fixed positioning - css

Question

I have a simple page with a textarea that I want to fill the entire screen, except for a bit at the top. It works perfectly in Chrome but doesn't stretch to the bottom of the window in Firefox. This is the CSS I'm using:
body#pad textarea {
position: fixed;
top: 3em;
right: 0;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
When I add height: 100% it does reach 100% in height, but that's not what I want, since it needs a little space at the top of the screen. Is there any pure CSS way to fix this? I'd really like to make it look and function like it does in Chrome without any Javascript.

Answer 1

As MDN
When both top and bottom are specified, and height is unspecified or
either auto or 100%, both the top and bottom distances are respected.
In all other situations, if height is constrained in any way, the top
property takes precedence and the bottom property is ignored.
So I suggest this trick to do, just remove top: 3em; and add height:calc(100% - 3em);
textarea {
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 3em);
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
<textarea placeholder="write..."></textarea>

Answer 2

Don't know why FF misbehave so here is a workaround using CSS calc()
Firefox appear to follow this rendering rule and by doing so actually have a preset height (and width) for the textarea element. It is this preset that overrides the top-bottom/left-right settings and therefore become constrained causing the constraint rules (top-bottom / left-right) to apply.
To make all browsers behave the same, a height and width need to be set explicit, where I used CSS calc() to get the correct height.
(the right and bottom properties can be removed as they no longer affect the rendered result)
html, body {
margin: 0;
height: 100%;
}
textarea {
position: fixed;
top: 3em;
left: 0;
width: 100%;
height: calc(100% - 3em);
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
resize: none;
}
<textarea>
write more...
</textarea>
In some situations the top-bottom/left-right properties is needed when using positioning, so for a textarea, one can use a wrapper like this
html, body {
margin: 0;
height: 100%;
}
div {
position: fixed;
top: 3em;
left: 0;
right: 0;
bottom: 0;
}
textarea {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
resize: none;
}
<div>
<textarea>
write more...
</textarea>
</div>

Answer 3

this css seem to work [https://jsfiddle.net/ubc4nz9k/]https://jsfiddle.net/ubc4nz9k/ set padding-top to your needs
#pad textarea {
width: 100%;
height:100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
#pad {
padding-top: 20px;
position: fixed;
width:100%;
height:100%;
left:0;
right:0;
}