Yüzde Yükseklik HTML 5/CSS

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;
}
Temani Afif
Edited question 2019ösp31ös13 Mart 2019 в 1:31
Programlama
html css height
2009ösp50ös20 Ekim 2009 в 8:50
71 görünümler
Çözüm

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, ve 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.

Community
Edited answer 2017ööp31öö10 Mayıs 2017 в 10:31
Yorumlar (2)

Yüksekliği ve öğelerinde de ayarlamanız gerekir; aksi takdirde, yalnızca içeriği sığdıracak kadar büyük olurlar. Örneğin:


Example of 100% width and height

html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }

<div></div>
Web_Designer
Edited answer 2017ööp54öö5 Şubat 2017 в 5:54
Yorumlar (3)

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">

  </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

Yorumlar (1)