Firefox textarea sizing bug?

Question

I'm attempting to create a fixed textarea that fills the entire width and height of the browser window using just CSS, and the following works perfectly in Chrome:

textarea {
    border: 2px solid #3D6AA2;
    padding: 5px;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    resize: none;
}

http://jsfiddle.net/BulletzBill/FZr9k/1/

However, if you view the fiddle in Firefox, it appears as though it does not take the bottom or right rules into account at all. Is this a known bug in firefox, or is there any workaround for it? I'd like to avoid using javascript/window resize listeners if possible.

Hummingbird

Ok figured it out. Funny but this is proper behaviour and a Chrome works incorrectly in this case. Check this answer and spec. – Roughandready

hmm, interesting. I guess I am just so conditioned to treat webkit's implementation as gospel that I didn't even consider it was the one doing it wrong. :) – Hummingbird

Answer 1

Here is an update to your jsfiddle

You need to make the width:100%, height:100% and box-sizing: border-box;

You only need 2 position points top and left

George

Problem with going that route is that then the textarea gets cut off, especially when you want to use padding/border on it. Look at this update to the fiddle to see what i mean: jsfiddle.net/BulletzBill/FZr9k/6. setting the top/right/bottom/left values all to zero works for other block-level elements such as <div>s in firefox, so thats why it just seems like a bug to me. – Hummingbird

@BillDami Just use box-sizing jsfiddle.net/FZr9k/8 However it's interesting why mozilla doe not stretch textarea. – Roughandready

It looks like that because the width is 100% + 4px as you have a 2px border on each side. just remove the border or if you need the border then you have to place it within another div – George

@George yeah but I'd still want to have the padding on the textarea to keep the text from going right up against the scrollbar in chrome, and that adds to the height as well. Looks like box-sizing takes care of that though as dfsq suggested. If you can add that to your answer I'll mark it as accepted. :) – Hummingbird

@BillDami I have updated my answer so that it goes to the most recent jsfiddle so it is easier for people to find and also mentioned box-sizing – George