Best IT Recipes

How to expand the width of textarea to 100% of the parent (or how to expand any HTML element to 100% of the width of the parent)?

How to expand the width of textarea to 100% parent?

I try the width of 100%, but it does not work, it expands to 100% of the page, which is a crash layout.

Here the question is visual. enter image description here

Please give some advice.

+42
html css
Jun 20 '13 at 9:17
source share
7 answers

<div> <div style="width:20%; float:left;"> <p>Some Contentsssssssssss</p> </div> <div style="float:left;width:80%;"> <textarea style="width:100%;"></textarea> </div> <div style="clear:both;"></div> </div>
+44
Jun 20 '13 at 9:43
source share

You need to define the width div containing textarea , and when you declare textarea , you can set .main > textarea to width: inherit .

Note: .main > textarea means a <textarea> inside an element with class="main" .

Here is a working solution

HTML:

 <div class="wrapper"> <div class="left">left</div> <div class="main"> <textarea name="" cols="" rows=""></textarea> </div> </div>

CSS:

 .wrapper { display: table; width: 100%; } .left { width: 20%; background: #cccccc; display: table-cell; } .main { width: 80%; background: gray; display: inline; } .main > textarea { width: inherit; }
+6
Jun 20 '13 at 9:28
source share

box model is something every web developer should be aware of. working with percentages for sizes and pixels for fill / fields just doesn't work. There is always a resolution at which it does not look very good (for example, setting the width to 90% and filling / edge 10px in a div with a width of less than 100 pixels).

Check this out (using micro.pravi code): http://jsbin.com/umeduh/2

 <div id="container"> <div class="left"> <div class="content"> left </div> </div> <div class="right"> <div class="content"> right <textarea>Check me out!</textarea> </div> </div> </div>

<div class="content"> , so you can use padding and margins without twisting the floats.

this is the most important part of CSS:

 textarea { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+5
Jun 20 '13 at 9:39 on
source share

I would do something like this:

HTML:

 <div class="wrapper"> <div class="side">sidebar here</div> <div class="main"> <textarea class="taclass"></textarea> </div> </div><!--/ wrapper -->

CSS

 .wrapper{ display: block; width: 100%; overflow: hidden; } .side{ float:left; width:20%; } .main{ float:right; width:80%; } .taclass{ display:block; width:100%; padding:2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+1
Jun 20 '13 at 9:25
source share

HTML:

 <div id="left"></div> <div id="content"> <textarea cols="2" rows="10" id="rules"></textarea> </div>

CSS

 body{ width:100%; border:1px solid black; border-radius:5px; } #left{ width:20%; height:400px; float:left; border: 1px solid black; display:block; } #content{ width:78%; height:400px; float:left; border:1px solid black; text-align:center; } textarea { margin-top:100px; width:98%; }

DEMO: HERE

+1
Jun 20 '13 at 9:34 on
source share

Try it .. Add it to your page

 <style> textarea { width:100%; } </style>
0
Jun 20 '13 at 9:23
source share

Add css

  <style type="text/css"> textarea { border:1px solid #999999 width:99%; margin:5px 0; padding:1%; } </style>
0
Jun 20 '13 at 9:24
source share


More articles:


All Articles