Larutan
Gunakan wadah fleksibel bersarang.
Singkirkan persentase ketinggian. Singkirkan properti tabel. Singkirkan vertical-align. Hindari penentuan posisi absolut. Tetap dengan flexbox sepanjang jalan.
Oleskan display: flexke item fleksibel ( .item), menjadikannya wadah fleksibel. Ini secara otomatis mengatur align-items: stretch, yang memberitahu anak ( .item-inner) untuk memperluas ketinggian penuh dari induk.
Penting: Hapus ketinggian yang ditentukan dari item fleksibel agar metode ini berfungsi. Jika seorang anak memiliki ketinggian yang ditentukan (misalnya height: 100%), maka ia akan mengabaikan align-items: stretchkedatangan dari orang tua. Agar stretchdefault berfungsi, tinggi anak harus dihitung dengan auto (penjelasan lengkap ).
Coba ini (tidak ada perubahan pada HTML):
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>
Demo jsFiddle
Penjelasan
Masalah saya adalah itu .item-inner { height: 100% }tidak berfungsi di webkit (Chrome).
Ini tidak berfungsi karena Anda menggunakan tinggi persentase dengan cara yang tidak sesuai dengan implementasi tradisional spesifikasi.
10.5 Tinggi konten: heightproperti
persentase
Menentukan tinggi persentase. Persentase dihitung sehubungan dengan ketinggian blok berisi kotak yang dihasilkan. Jika ketinggian blok yang mengandung tidak ditentukan secara eksplisit dan elemen ini tidak benar-benar diposisikan, nilai dihitung auto.
otomatis
Ketinggiannya tergantung pada nilai properti lainnya.
Dengan kata lain, agar persentase tinggi untuk bekerja pada anak dalam-aliran, orang tua harus memiliki tinggi yang ditetapkan.
Dalam kode Anda, wadah tingkat atas memiliki ketinggian yang ditentukan: .container { height: 20em; }
Wadah tingkat ketiga memiliki ketinggian yang ditentukan: .item-inner { height: 100%; }
Tetapi di antara mereka, wadah tingkat kedua - .item- tidak memiliki ketinggian yang ditentukan. Webkit melihatnya sebagai tautan yang hilang.
.item-innermemberitahu Chrome: beri sayaheight: 100% . Chrome mencari ke induk ( .item) untuk referensi dan menjawab: 100% dari apa? Saya tidak melihat apa-apa (mengabaikan flex: 1aturan yang ada). Akibatnya, itu berlaku height: auto(tinggi konten), sesuai dengan spesifikasi.
Firefox, di sisi lain, sekarang menerima tinggi fleksibel orangtua sebagai referensi untuk tinggi persentase anak. IE11 dan Edge juga menerima ketinggian fleksibel.
Juga, Chrome akan menerima flex-growsebagai referensi induk yang memadai jika digunakan bersama denganflex-basis (nilai numerik apa pun berfungsi ( autotidak akan), termasuk flex-basis: 0). Namun pada tulisan ini, solusi ini gagal di Safari.
#outer {
display: flex;
flex-direction: column;
height: 300px;
background-color: white;
border: 1px solid red;
}
#middle {
flex-grow: 1;
flex-basis: 1px;
background-color: yellow;
}
#inner {
height: 100%;
background-color: lightgreen;
}
<div id="outer">
<div id="middle">
<div id="inner">
INNER
</div>
</div>
</div>
Empat Solusi
1. Tentukan ketinggian pada semua elemen induk
Solusi lintas-browser yang andal adalah menentukan ketinggian pada semua elemen induk. Ini mencegah tautan yang hilang, yang oleh peramban berbasis Webkit dianggap sebagai pelanggaran terhadap spesifikasi.
Perhatikan itu min-heightdan max-heighttidak dapat diterima. Itu pasti heightproperti.
Lebih detail di sini: Bekerja dengan heightproperti CSS dan nilai persentase
2. Posisi Relatif & Mutlak CSS
Berlaku position: relativeuntuk orang tua dan position: absoluteanak.
Ukuran anak dengan height: 100%dan width: 100%, atau menggunakan sifat offset: top: 0, right: 0, bottom: 0, left: 0.
Dengan penentuan posisi absolut, persentase tinggi berfungsi tanpa ketinggian yang ditentukan pada induk.
3. Hapus wadah HTML yang tidak perlu (disarankan)
Apakah ada kebutuhan untuk dua kontainer di sekitar button? Mengapa tidak menghapus .itematau .item-inner, atau keduanya? Meskipun buttonelemen terkadang gagal sebagai wadah fleksibel , mereka bisa berupa benda lentur. Pertimbangkan untuk membuat buttonanak dari .containeratau .item, dan menghapus mark-up gratis.
Ini sebuah contoh:
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
a {
flex: 1;
background: orange;
border-bottom: 1px solid white;
display: flex; /* nested flex container (for aligning text) */
align-items: center; /* center text vertically */
justify-content: center; /* center text horizontally */
}
<div class="container">
<a>Button</a>
<a>Button</a>
<a>Button</a>
</div>
4. Container Flex Bersarang (disarankan)
Singkirkan persentase ketinggian. Singkirkan properti tabel. Singkirkan vertical-align. Hindari penentuan posisi absolut. Tetap dengan flexbox sepanjang jalan.
Oleskan display: flexke item fleksibel ( .item), menjadikannya wadah fleksibel. Ini secara otomatis mengatur align-items: stretch, yang memberitahu anak ( .item-inner) untuk memperluas ketinggian penuh dari induk.
Penting: Hapus ketinggian yang ditentukan dari item fleksibel agar metode ini berfungsi. Jika seorang anak memiliki ketinggian yang ditentukan (misalnya height: 100%), maka ia akan mengabaikan align-items: stretchkedatangan dari orang tua. Agar stretchdefault berfungsi, tinggi anak harus dihitung dengan auto (penjelasan lengkap ).
Coba ini (tidak ada perubahan pada HTML):
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>