Çözüm
İç içe geçmiş esnek kaplar kullanın.
Yüzde yüksekliklerinden kurtulun. Tablo özelliklerinden kurtulun. Kurtul vertical-align. Mutlak konumlandırmadan kaçının. Sadece flexbox ile sonuna kadar devam edin.
display: flexEsneme maddesine ( .item) uygulayın ve esneyerek esnek bir kap yapın. Bu align-items: stretch, çocuğa ( .item-inner) ebeveynin tam yüksekliğini genişletmesini söyleyen otomatik olarak ayarlanır .
Önemli: Bu yöntemin çalışması için esnek nesnelerden belirtilen yükseklikleri kaldırın. Bir çocuğun yüksekliği belirtilmişse (örn. height: 100%), O zaman align-items: stretchebeveynin gelmesini göz ardı eder . İçin stretchçalışmalarına varsayılan çocuğun yüksekliği hesaplamak gerekir auto (tam açıklama ).
Bunu deneyin (HTML'de değişiklik yok):
.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>
jsFiddle demosu
açıklama
Benim sorunum bu .item-inner { height: 100% }webkit (Chrome) çalışmıyor.
Çalışmıyor çünkü yüzde yüksekliğini, spesifikasyonun geleneksel uygulamasına uymayan bir şekilde kullanıyorsunuz.
10.5 İçerik yüksekliği: heightözellik
yüzde
Yüzde yüksekliğini belirtir. Yüzde, üretilen kutunun içerdiği bloğun yüksekliğine göre hesaplanır. Kapsayıcı bloğun yüksekliği açıkça belirtilmezse ve bu öğe tam olarak konumlandırılmazsa, değer hesaplanır auto.
Oto
Yükseklik, diğer özelliklerin değerlerine bağlıdır.
Diğer bir deyişle, yüzde yüksekliğin bir akış içi çocuk üzerinde çalışması için, ebeveynin ayarlanmış bir yüksekliğe sahip olması gerekir .
Kodunuzda, üst düzey kapsayıcı tanımlanmış bir yüksekliğe sahiptir: .container { height: 20em; }
Üçüncü seviye kabın belirlenmiş bir yüksekliği vardır: .item-inner { height: 100%; }
Ama aralarında, ikinci seviye konteyner - .item- değil tanımlanmış bir yüksekliğe sahiptir. Webkit bunu eksik bir bağlantı olarak görüyor.
.item-innerChrome'a söylüyor: verheight: 100% . Chrome .item, başvuru için parent ( ) öğesine bakar ve yanıt verir: Neyin% 100'ü? Hiçbir şey görmüyorum ( flex: 1orada olan kuralı görmezden gelmek ). Sonuç olarak, geçerliheight: auto spesifikasyona uygun olarak (içerik yüksekliği) .
Öte yandan Firefox, artık bir ebeveynin esnek yüksekliğini çocuğun yüzde yüksekliğine referans olarak kabul ediyor. IE11 ve Edge esnek yükseklikleri de kabul eder.
Ayrıca, Chrome ile bağlantılı olarak kullanıldığında (varsa, herhangi bir sayısal değer işe yarar ( olmaz)) flex-growyeterli bir üst referans olarak kabul eder . Ancak bu yazı itibariyle bu çözüm Safari'de başarısız oluyor.flex-basisautoflex-basis: 0
#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>
Dört Çözüm
1. Tüm üst öğelerde yükseklik belirtme
Güvenilir bir çapraz tarayıcı çözümü, tüm üst öğelerde yükseklik belirtmektir. Bu, Webkit tabanlı tarayıcıların spesifikasyonun ihlal edildiğini düşündüğü eksik bağlantıları önler.
Unutmayın min-heightve max-heightkabul edilemez. heightMülkiyet olmalı .
Daha fazla ayrıntı burada: CSS heightözelliği ve yüzde değerleriyle çalışma
2. CSS Göreli ve Mutlak Konumlandırma
Ebeveyne position: relativeve position: absoluteçocuğa uygulayın.
Boyutu ile çocuk height: 100%ve width: 100%ya kullanmak ofset özellikleri: top: 0, right: 0, bottom: 0,left: 0 .
Mutlak konumlandırma ile yüzde yüksekliği, üst öğe üzerinde belirli bir yükseklik olmadan çalışır.
3. Gereksiz HTML kapsayıcılarını kaldırın (önerilir)
Etrafta iki konteynere ihtiyaç var mı button? Neden kaldırmaz .itemya .item-inner, ya da her ikisi? buttonÖğeler bazen esnek kaplar olarak başarısız olsa da, esnek öğeler olabilirler. buttonBir çocuk yapmayı .containerveya .itemzahmetli işaretlemeyi kaldırmayı düşünün .
İşte bir örnek:
.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. İç içe Flex Konteynerler (önerilir)
Yüzde yüksekliklerinden kurtulun. Tablo özelliklerinden kurtulun. Kurtul vertical-align. Mutlak konumlandırmadan kaçının. Sadece flexbox ile sonuna kadar devam edin.
display: flexEsneme maddesine ( .item) uygulayın ve esneyerek esnek bir kap yapın. Bu align-items: stretch, çocuğa ( .item-inner) ebeveynin tam yüksekliğini genişletmesini söyleyen otomatik olarak ayarlanır .
Önemli: Bu yöntemin çalışması için esnek nesnelerden belirtilen yükseklikleri kaldırın. Bir çocuğun yüksekliği belirtilmişse (örn. height: 100%), O zaman align-items: stretchebeveynin gelmesini göz ardı eder . İçin stretchçalışmalarına varsayılan çocuğun yüksekliği hesaplamak gerekir auto (tam açıklama ).
Bunu deneyin (HTML'de değişiklik yok):
.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>