Pelampung berdampingan berukuran dinamis

HTML saya adalah sebagai berikut:

<div id="list-container"> </div>
<div id="button-container"> </div>

Dan CSS untuk dua div ini:

#button-container {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    float: left;
    height: 100%;
    background-color: #FAD275;
}

Kedua div ini bersebelahan dan memiliki ketinggian yang sama. Div button-container ada di sebelah kanan dan harus memiliki lebar tetap 100px. Namun, div kiri bernama list-container harus memiliki lebar yang sama dengan sisa ruang yang dialokasikan oleh wadah induk. Jadi misalnya, jika div induk saya memiliki lebar 400px, dan div button-container memakan 100px, maka saya harus dapat menentukan sesuatu seperti height: 100% untuk div list-container dan membuatnya sama dengan lebar 300px.

Aturan mutlak #1 adalah saya tidak dapat menetapkan lebar tetap untuk div list-container. Div induk untuk semua ini dapat diubah ukurannya secara dinamis, jadi setiap anak di bawahnya harus dirancang untuk diubah ukurannya, oleh karena itu mengapa pertanyaan ini ada.

Ingatlah bahwa ini semua dilakukan dalam ekstensi Google Chrome, jadi saya memiliki akses ke HTML5 dan CSS3. Saya juga tidak perlu khawatir tentang dukungan lintas browser. Saya hanya ingin ini berfungsi di Chrome.

Adakah yang bisa membantu saya mengetahui cara membuat list-container mengisi sisa ruang wadah induk tanpa menggunakan lebar tetap?


google-chrome html css google-chrome-extension
person void.pointer    schedule 18.09.2011    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Anda dapat menggunakan properti CSS display: table; dan display: table-cell;.

Ini meniru cara tabel menangani barisnya, tetapi menerapkannya pada div.

Anda memerlukan div wrapper, tetapi hanya itu markup tambahan yang Anda perlukan.

HTML

<div class="wrap">
<div id="list-container">list container </div>
<div id="button-container">button container </div>
</div>

CSS:

.wrap
{
    display: table;
    width: 100%;
    height: 100%;
}

#button-container {
    display: table-cell;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    display: table-cell;
    height: 100%;
    background-color: #FAD275;
}

Lihat contoh saya di sini.

person Kyle    schedule 18.09.2011
comment
Saya mencoba ini, tetapi untuk beberapa alasan dalam kode asli saya tidak berfungsi. Saya menambahkan tombol ke button-container saya dan tombol itu didorong ke bawah karena beberapa alasan. Adakah yang bisa menjelaskan hal ini? Berikut kodenya: jsfiddle.net/p4dvU/9 - person void.pointer; 18.09.2011
comment
Itu harus berada di bagian atas di dalam button-container. Di sinilah biasanya ditempatkan tanpa memperkenalkan display: table - person void.pointer; 18.09.2011
comment
Cukup tambahkan vertical-align: top; ke wadah tombol dan sebagai catatan <ul> bukan tag penutup diri yang valid. jsfiddle.net/Kyle_Sevenoaks/p4dvU/11 - person Kyle; 18.09.2011
comment
Terima kasih Kyle. Saya bukan pengembang web berpengalaman, jadi saya menghargai tipnya. Untuk referensi di masa mendatang, apakah ada daftar tag penutup otomatis yang valid di suatu tempat? - person void.pointer; 18.09.2011
comment
Kyle, perataan vertikal membantu dengan wadah tombol, namun karena alasan tertentu wadah daftar saya hanya setinggi 230 piksel, bukan 250 piksel. Saat saya menghapus display: table-cell;, ukurannya kembali ke 250 piksel sebagaimana mestinya dan masih terlihat bagus. Apakah aman untuk menghapus atribut tampilan sel tabel dari wadah daftar saya? Mengapa ada 20px yang hilang di bagian bawah div ini? Sepertinya ini diperlakukan sebagai padding meskipun padding memiliki 0 di alat pengembangan web Chrome. - person void.pointer; 18.09.2011
comment
Hapus tampilan: absolut; karena ini bukan properti css, itu adalah display: block/*or other options*/; atau posisi: absolut/*pilihan lain*/. Dan atur padding ke 0 pada badan. jsfiddle.net/Kyle_Sevenoaks/p4dvU/13 - person Kyle; 18.09.2011
comment
Terima kasih atas sarannya. Saya menemukan bahwa box-sizing: border-box; di #list saya yang menyebabkan masalah. Saya tidak tahu mengapa tetapi menghapusnya akan memperbaikinya :) - person void.pointer; 18.09.2011

arrow_upward
0
arrow_downward

Situs ini mungkin bermanfaat bagi Anda:

http://glish.com/css/

person Steve Wellens    schedule 18.09.2011
comment
Bisakah Anda menunjukkan artikel mana yang menurut saya menarik? - person void.pointer; 18.09.2011

arrow_upward
0
arrow_downward

Atur wadah kiri menjadi 100% dan berikan margin kanan 100px. Jawaban asli saya mengatakan padding juga, tapi itu salah. Margin menciptakan ruang untuk div kanan mengambang. Lebar persen memungkinkan div kiri diubah ukurannya secara dinamis.

person mrtsherman    schedule 18.09.2011
comment
Saya sebenarnya tidak bisa menjalankan ini sama sekali. Tidak peduli apa yang saya coba, bahkan dengan margin 100px pada wadah daftar, wadah tombol saya terdorong keluar dan hang di bawah div induk saya. Saya tidak bisa membuat mereka berdampingan - person void.pointer; 18.09.2011