Bagaimana untuk memperluas textarea width 100% dari orang tua (atau bagaimana untuk memperluas setiap elemen HTML untuk 100% dari orangtua lebar)?

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.

Mengomentari pertanyaan (4)
Larutan

<div>
<div style="width:20%; float:left;">
 <p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
 <textarea style="width:100%;">
Komentar (2)

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="">
Komentar (2)

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!
Komentar (1)

HTML:


<div id="left"></div>
<div id="content">
        <textarea cols="2" rows="10" id="rules">
Komentar (3)

Aku akan melakukan sesuatu seperti ini:

HTML:

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

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;
}
Komentar (8)

Coba ini..Menambahkan ini di halaman anda


textarea
{
width:100%;
}
Komentar (3)

Tambahkan css


    textarea
    {

        border:1px solid #999999
        width:99%;
        margin:5px 0;
        padding:1%;
    }
Komentar (3)