CSS'de bir <div>
i belirli bir yüzde yüksekliğine ayarlamaya çalışıyorum, ancak içindeki içerikle aynı boyutta kalıyor. Ancak HTML 5 <!DOCTYTPE html>
öğesini kaldırdığımda, <div>
öğesi istenildiği gibi tüm sayfayı kaplıyor. Sayfanın geçerli olmasını istiyorum, bu yüzden ne yapmalıyım?
ID'si page
olan <div>
üzerinde bu CSS'ye sahibim:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
CSS'de bir div'i belirli bir yüzde yüksekliğine ayarlamaya çalışıyorum
Neyin yüzdesi?
Bir yüzde yüksekliği ayarlamak için, üst öğesinin(*) açık bir yüksekliğe sahip olması gerekir. Bu oldukça açıktır, çünkü yüksekliği auto
olarak bırakırsanız, blok içeriğinin yüksekliğini alacaktır... ancak içeriğin kendisi ebeveynin yüzdesi cinsinden ifade edilen bir yüksekliğe sahipse, kendinize küçük bir Catch 22 yapmış olursunuz. Tarayıcı pes eder ve sadece içerik yüksekliğini kullanır.
Dolayısıyla div'in üst öğesinin açık bir height
özelliği olmalıdır. İsterseniz bu yükseklik bir yüzde de olabilir, ancak bu sadece sorunu bir üst seviyeye taşır.
Div yüksekliğini görüntü alanı yüksekliğinin bir yüzdesi yapmak istiyorsanız, <html>
ve <body>
dahil olmak üzere div'in her atasının height: 100%
olması gerekir, bu nedenle div'e kadar açık bir yüzde yükseklikleri zinciri vardır.
(*: veya div konumlandırılmışsa, konumlandırılacak en yakın ata olan 'içeren blok' da konumlandırılır).
Alternatif olarak, tüm modern tarayıcılar ve IE>=9, görünüm alanı yüksekliğine (vh
) ve görünüm alanı genişliğine (vw
) göre yeni CSS birimlerini destekler:
div {
height:100vh;
}
Daha fazla bilgi için buraya bakın]1.
Yüksekliği <html>
ve <body>
öğelerinde de ayarlamanız gerekir; aksi takdirde, yalnızca içeriği sığdıracak kadar büyük olurlar. Örneğin:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
bobince'nin cevabı size hangi durumlarda "height: XX%;" çalışacak veya çalışmayacaktır.
Belirli bir orana sahip bir eleman oluşturmak istiyorsanız (yükseklik: kendi genişliğinin %'si), bunu yapmanın en iyi yolu padding-bottom
kullanarak yüksekliği etkin bir şekilde ayarlamaktır. Kare için örnek:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
Kare konteyner sadece dolgudan oluşacak ve içerik konteyneri dolduracak şekilde genişleyecektir. Bu konuda 2009'dan uzun bir makale: http://alistapart.com/article/creating-intrinsic-ratios-for-video