Bir kapsayıcıyı tüm sayfayı (veya görüntü alanını, hangisi büyükse) doldurmaya çalışıyorum, ancak bir sorunla karşılaştım. https://stackoverflow.com/a/17555766, <html> ve <body>'u% 100 yüksekliğe ayarlamak için bu gönderideki önerileri kullanıyorum.Min. Yükseklik ile boyutlandırıldığında kapsayıcının yüksekliği neden devralınmıyor?
Ama <body> yükseklik height: 100% seti değil min-height: 100% ile zaman .Content div sadece görünüm doldurur fark ettik. Neden? .Content neden min-height ile ayarlandığında <body>'un yüksekliğini almıyor? Bunun için bir düzeltme var mı (mutlak konumlandırma veya sabit yükseklikler olmadan)?
html
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
css codepen
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
: http://codepen.io/anon/pen/mJEMVX
P.S. .: <body> yükseklik height: 100% ile ayarlandığında, hem min-height: 100% ve height: 100% eser .Content için beklendiği gibi.
Sanırım temel neden, gövde yüksekliği ile içerik yüksekliği arasındaki dairesel bağımlılıktır. .content'ten sonra başka bir öğe olduğunu hayal edin. Şimdi, içerik% 100'e genişlerse, gövde de genişlemelidir, bu da içeriğin daha da genişlemesine neden olur. Muhtemelen, spekülasyonun neden yüzde bir yükseklik tanımlamasının nedeni, bu dairesel bağımlılığı kırmaktır. –
@Alexey Lebedev: Doğru. – BoltClock