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).
For the record, IE8 supports box-sizing just fine, and it's an awesome property.
Oo. Missed the bit about locking the top/bottom. hmmm
...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;
}
This is great! I just made it into a snippet in TextMate! Thanks man.
Hi! Do you try to apply display: block to text area with first technique? This works fine.
Sorry... I not fully understand the problem.
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.
you are the cure for my headache.... thank you so much.
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!
This is a good article. Just Keep it up! Thanks!
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.