Bagaimana cara membuat lebar CSS untuk mengisi induk?

88

Saya yakin masalah ini telah ditanyakan sebelumnya tetapi saya tidak dapat menemukan jawabannya.

Saya memiliki markup berikut:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

Keinginan saya adalah membuat foo memiliki lebar 600px( width: 600px;) dan membuat bar memiliki perilaku berikut:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

Dengan kata lain, alih-alih menyetel lebar bilah ke, 592pxsaya ingin menyetel lebar terluar bilah 100%agar dihitung 592px. Yang penting di sini adalah bahwa saya dapat mengubah lebar foo menjadi 800pxdan bilah akan menghitung ketika diberikan alih-alih saya harus melakukan matematika untuk semua contoh ini secara manual.

Apakah ini mungkin dalam CSS murni?

Beberapa lebih menyenangkan dengan itu:

  • Bagaimana jika #bar meja itu?
  • Bagaimana jika #bartextarea?

  • Bagaimana jika #barsebuah masukan?

  • Bagaimana jika #footabel sel ( td)? (Apakah ini mengubah masalah atau apakah masalahnya sama?)

Sejauh ini table#bar, input#bartelah dibahas. Saya belum melihat solusi yang baik untuk textarea # bar. Saya pikir textarea tanpa batas / margin / padding dengan divbungkus mungkin bekerja dengan divgaya untuk bekerja sebagai batas textarea.

css Dmitriy Likhten
sumber

Jawaban:

39

EDIT :

Ketiga elemen yang berbeda tersebut semuanya memiliki aturan rendering yang berbeda.

Maka untuk:

table#barAnda perlu mengatur lebar menjadi 100% jika tidak maka lebar hanya akan selebar yang ditentukan. Namun, jika lebar total baris tabel lebih besar dari lebarnya, maka lebar total baris tabel barakan diperluas. JIKA saya ingat Anda dapat mengatasi ini dengan mengatur display: block !important;meskipun sudah beberapa saat sejak ive harus memperbaikinya. (Saya yakin seseorang akan mengoreksi saya jika saya salah).

textarea#bari beleive adalah elemen level blok sehingga akan mengikuti aturan yang sama seperti div. Satu-satunya peringatan di sini adalah yang textareamengambil atribut dari colsdanrows yang diukur dalam kolom karakter. Jika ini ditentukan pada elemen, itu akan menggantikan lebar yang ditentukan oleh css.

input#baradalah elemen sebaris, jadi secara default Anda tidak dapat menetapkan lebarnya. Namun mirip dengan textarea's colsatribut, memiliki sizeatribut pada elemen yang dapat menentukan lebar. Karena itu, Anda selalu dapat menentukan lebar dengan menggunakan display: block;di css Anda untuk itu. Kemudian itu akan mengikuti aturan rendering yang sama seperti div.

td#fooakan diterjemahkan sebagai table-cellyang memiliki beberapa kegilaan untuk itu. Intinya di sini adalah bahwa untuk tujuan Anda itu akan bertindak div#foosejauh membatasi lebar isinya. Satu-satunya masalah di sini adalah menjadi teks potensial yang tidak dapat dibuka di kolom di suatu tempat yang akan membuatnya mengabaikan pengaturan lebar Anda. Juga semua sel di kolom akan mendapatkan lebar sel terluas.

Itulah perilaku default dari elemen level blok - mis. jika lebar adalah auto(default) maka itu akan menjadi 100% dari lebar bagian dalam elemen penampung. jadi intinya:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

akan memberikan apa yang Anda inginkan.

prodigitalson
sumber
Hei, terima kasih. Juga bersenang-senang dengan tabel memutuskan untuk berdarah meskipun. Saya berasumsi tabel memiliki perilaku yang sama dengan divs?
Dmitriy Likhten
@Dimitry: Tidak, mereka memiliki aturan khusus yang membuatnya lebih mirip inline-blockdaripada blockelemen. Perhatikan bahwa saya mengatakan lebih seperti tidak sama dengan :-) Apa yang mungkin Anda alami adalah bahwa kecuali ditentukan lain, mereka umumnya akan diperluas untuk mengakomodasi semua kolom yang dapat sangat mengganggu jika beberapa header / sel memiliki teks lama yang tidak dapat dibuka di dalamnya.
ajaib
Terima kasih telah membantu :) Izinkan saya memperbarui pertanyaan sedikit untuk memberikan gambaran umum yang lebih lengkap tentang masalah dan semoga semua solusi dapat dicantumkan dalam satu bagian.
Dmitriy Likhten
Saya telah bereksperimen dengan div # foo table # bar dan pengaturan lebar: 100% pada tabel # bar memang akan memperluas tabel, tetapi perbatasan / margin tabel akan mengalir melalui div # foo. Mengatur tabel untuk ditampilkan: blok tidak baik karena mengacaukan aspek lain dari rendering tabel seperti penanganan lebar baris. textarea # bar tidak akan meluas ketika lebar disetel ke otomatis atau tidak disetel.
Dmitriy Likhten
1
karena textarea#barAnda harus dapat mengaturnya display: blockdengan sedikit efek samping. Sejauh tabel, saya tahu saya telah menggunakan semacam solusi / mitigasi untuk itu di masa lalu tetapi saya tidak ingat apa itu saat ini. Namun saya akan mengatakan bahwa saya biasanya tidak menetapkan "margin" pada tabel melainkan membungkusnya dalam div dengan padding / margin ... ini bisa #foo sendiri atau div lain yang digunakan hanya untuk menerapkan jenis spasi ini. Anda juga dapat melakukan untuk mengatasi masalah perbatasan untuk menerapkan batas hanya ke sel pertama / terakhir dalam satu baris / sel di baris pertama / terakhir
prodigitalspada
28

hampir selesai, ubah saja outerWidth: 100%;ke width: auto;(outerWidth bukan properti CSS)

alternatifnya, terapkan gaya berikut ke bilah:

width: auto;
display: block;
Rowan
sumber
4
Itu tidak akan berfungsi jika dia mengatur padding pada margin barkarena akan ditambahkan ke 100% secara efektif membuat barlebih luas dari induknya foo.
ajaib
ya, saya menjawab yang itu terlalu cepat; P
Rowan
Tunggu sebentar. Jadi jika saya mengatur properti lebar menjadi apa pun, itu akan berdarah? lebar: otomatis bukan solusinya, bukan mengatur lebar sama sekali?
Dmitriy Likhten
2
ya itu benar. Setiap elemen yang memiliki display:block;(juga dikenal sebagai elemen level blok) akan mengadopsi perilaku ini. elemen DIV memiliki width:auto;dan display:block;diatur secara default.
Rowan
Posting lama, tetapi tidak bisakah dia menggunakan box-sizing: border-box untuk memungkinkan padding berada di dalam lebar elemen.
CHBresser
16

Gunakan gaya 

left: 0px;

atau dan

right: 0px;

atau dan

top: 0px;

atau dan

bottom: 0px;

Saya pikir untuk kebanyakan kasus itu akan melakukan pekerjaan itu

Tigsar
sumber
4

Jadi setelah penelitian ditemukan hal berikut:

Untuk div#barpengaturan display:block; width: auto;menyebabkan setaraouterWidth:100%;

Untuk table#barAnda perlu membungkusnya dalam div dengan aturan yang dinyatakan di bawah ini. Jadi struktur Anda menjadi:

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

Dengan cara ini tabel menggunakan div induk 100%, dan #barWrapdigunakan untuk menambahkan batas / margin / padding ke #bartabel. Perhatikan bahwa Anda perlu mengatur latar belakang semuanya #barWrapdan memiliki #barlatar belakang transparan atau sama seperti #barWrap.

Untuk textarea#bardan input#barAnda perlu melakukan hal yang sama seperti table#bar, sisi negatifnya adalah dengan menghapus border Anda menghentikan rendering widget asli dari input / textarea dan #barWrapborder akan terlihat sedikit berbeda dari yang lainnya, jadi Anda mungkin harus melakukannya gaya semua masukan Anda dengan cara ini.

Dmitriy Likhten
sumber
1 
box-sizing: border-box;
width: 100%;
padding: 5px;

ukuran kotak: kotak perbatasan; membuatnya sedemikian rupa sehingga padding, margin, dan border disertakan dalam kalkulasi lebar.

MDN

qqqqqqqqqqqqqqqqqqqqqqqqq
sumber