overflow: visible;

This way, the textarea will overflow it's container, but appear fixed to the container's container (make sense? - see example in the github repo above).

Chris Coyier said on April 01, 2011

Possibly of note: you could ONLY set the bottom/right in Firefox and that would be OK, it's just setting all four that isn't going to happen because of the intrinsic width.

Jacob Rask said on April 01, 2011

For the record, IE8 supports box-sizing just fine, and it's an awesome property.

Dom Christie said on April 01, 2011

Oo. Missed the bit about locking the top/bottom. hmmm

Dom Christie said on April 01, 2011

...or a combination of the two?


textarea {
  padding: 5px;
  border: 1px solid #ccc;
  width: 100%;
  height: 100%;
}

.textarea-container {
  margin-right: 12px;
  margin-bottom: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
}

Marc said on April 07, 2011

This is great! I just made it into a snippet in TextMate! Thanks man.

Oleg Levshin said on April 08, 2011

Hi! Do you try to apply display: block to text area with first technique? This works fine.

Oleg Levshin said on April 08, 2011

Sorry... I not fully understand the problem.

Pete said on April 21, 2011

On the project I'm working on just now I'm using box-sizing property to get these benefits. Setting the input/textarea to 100% width, and for IE 6/7 that don't support box-sizing setting the width to something like 98% or less depending on how much padding and border is used.

I'd much rather do this than back date code to give perfect support to old versions of IE that will be nowhere in a few years. Though I guess there are still situations where you have to do this.

Collin said on April 22, 2011

you are the cure for my headache.... thank you so much.

appliance repair Santa Monica said on May 04, 2011

Ia€?m nonetheless learning from you, however Ia€?m improving myself. I definitely love reading everything that's written in your blog.Keep the stories coming. I beloved it!

Thomas Sabo Chains said on May 04, 2011

This is a good article. Just Keep it up! Thanks!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.
久久中文字幕免费高清,三级在线看中文字幕完整版,中文字幕偷乱视频在线