Bagaimana untuk memperluas textarea width 100% dari orang tua?
Saya mencoba lebar 100% tapi itu tidak bekerja mengembang 100% dari halaman yang crash tata letak.
Berikut pertanyaan dalam cara visual.
Silakan memberikan beberapa petunjuk.
<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>
Anda perlu mendefinisikan lebar
dari div yang berisi textarea
dan ketika anda mendeklarasikan textarea
, anda kemudian dapat mengatur .utama > textarea
memiliki lebar: mewarisi
.
Catatan: .utama > textarea
berarti <textarea>
di dalam suatu elemen dengan class="main"`.
Berikut ini adalah [solusi][1]
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;
}
Kotak model adalah sesuatu yang setiap pengembang web harus tahu tentang. bekerja dengan persen untuk ukuran dan pixel untuk padding/margin hanya doesn't bekerja. Selalu ada resolusi yang doesn't terlihat baik (misalnya memberikan lebar 90% dan padding/margin 10px dalam sebuah div dengan lebar bawah 100px).
Check this out (menggunakan mikro.pravi's kode): 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>
The <div class="content">
yang ada sehingga anda dapat menggunakan padding dan margin tanpa mengacaukan mengapung.
ini adalah bagian paling penting dari CSS:
textarea {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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: [Di SINI][1]
Aku akan melakukan sesuatu seperti ini:
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;
}