How to fit textarea exactly inside a div - CSS


Tags: css

Problem :

I have a <div> with fixed width and height (may be in px / %). I have a <textarea> inside that, having a width of 100%, like;

HTML

<div>
    <textarea></textarea>
</div>

CSS

div{
    height: 200px;
    width: 300px;
    background: red;
}
textarea{
    height: 100px;
    width: 100%;
}

But the </textarea> is stretching out of the container, like; Screenshot

I want the textarea to stretch to 100% with of the container. How can I achieve this?

Here is the working fiddle.

Thanks in advance...:)



Solution :

Add box-sizing:border-box to the textarea's CSS.


    CSS Howto..

    How to change css property of content:url in jquery?

    How to get Sub Menu to right align using CSS

    How to get CSS background images to show up in HTML files opened by Word?

    How is this fluid column layout changing to single-column as page narrows?

    How To Remove Wordpress Title From One Page?

    How to style in IE6 CSS?

    How do I style an upload input using CSS?

    How to add a class if div height reaches a fixed height?

    How to render my dialog on top?

    How to change the background color of the heading from transparent to paint white?

    How can I align text using CSS but perform like printf in C? [closed]

    How to use CSS to change icon color

    How to make a footer stay on the bottom?

    How to make a ghost element in CSS?

    How to clear the parent css

    How to get MetroUI CSS Datepicker value with javascript

    How to get css class name using Selenium?

    How to underline groups of letters in HTML and CSS

    How is better to do with CSS sprites [closed]

    How to implement a webpage with tabs in my case?

    How to tell the browser to ignore previous css edits?

    How to assign color obtained by CSS gradient generator

    How can I get my drop-down to not open unless the li is hovered?

    How to use `attr` when not on `content` property [duplicate]

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to indent input controls for a nested HTML list using CSS to a single column

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    how to let -ms-grid adaptive width layout in win8 html and javascript metro app?

    Using Javascript or JQuery to show/hide on click, and change image as well

    How to place a div below another div?