3

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.

Bill Dami
  • 3,205
  • 5
  • 51
  • 70
  • 1
    Ok figured it out. Funny but this is proper behaviour and a Chrome works incorrectly in this case. Check this [answer](http://stackoverflow.com/a/6815173/949476) and [spec](http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width). – dfsq Apr 18 '13 at 13:40
  • 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. :) – Bill Dami Apr 18 '13 at 13:46

1 Answers1

2

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

Andrew
  • 1,850
  • 14
  • 18
  • 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: http://jsfiddle.net/BulletzBill/FZr9k/6/. setting the top/right/bottom/left values all to zero works for other block-level elements such as `
    `s in firefox, so thats why it just seems like a bug to me.
     – Bill Dami Apr 18 '13 at 13:32
  • 1
    @BillDami Just use `box-sizing` http://jsfiddle.net/FZr9k/8/ However it's interesting why mozilla doe not stretch textarea. – dfsq Apr 18 '13 at 13:33
  • 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 – Andrew Apr 18 '13 at 13:35
  • @Andrew 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. :) – Bill Dami Apr 18 '13 at 13:39
  • @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` – Andrew Apr 18 '13 at 13:42