Üst div'in yüksekliğini belirtmeden alt div'i üst div'in yüksekliğinin %100'ü olmaya nasıl zorlayabilirim?

Aşağıdaki yapıya sahip bir sitem var:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Navigasyon solda ve içerik div'i sağdadır. İçerik div'i için bilgiler PHP aracılığıyla çekilir, bu nedenle her seferinde farklıdır.

Hangi sayfa yüklenmiş olursa olsun, yüksekliği içerik div'inin yüksekliği ile aynı olacak şekilde navigasyonu dikey olarak nasıl ölçeklendirebilirim?

TylerH
Edited question 2019ösp20ös20 Ocak 2019 в 8:20
Programlama
html css
2009ösp14ös22 Temmuz 2009 в 10:14
28 görünümler
Çözüm

NOT: Bu yanıt, Flexbox standardını desteklemeyen eski tarayıcılar için geçerlidir. Modern bir yaklaşım için bkz: https://stackoverflow.com/a/23300532/1155721

Tarayıcılar Arası CSS ile ve Hack Kullanmadan Eşit Yükseklikte Sütunlar]1 sayfasına göz atmanızı öneririm.

Temel olarak, bunu CSS ile tarayıcı uyumlu bir şekilde yapmak önemsiz değildir (ancak tablolarla önemsizdir), bu nedenle kendinize uygun bir önceden paketlenmiş çözüm bulun.

Ayrıca, cevap %100 yükseklik mi yoksa eşit yükseklik mi istediğinize göre değişir. Genellikle eşit yüksekliktir. Eğer %100 yükseklik istiyorsanız cevap biraz farklıdır.

csvan
Edited answer 2017ööp6öö11 Temmuz 2017 в 11:06
Yorumlar (2)

Beklenmedik şekilde kısa bir içerik div'i olması durumunda navigasyon div'inin kırpılmasını sorun etmiyorsanız, en azından bir kolay yol var:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Diğer yandan faux-columns tekniği hakkındaki makalesine bağlantı.

David Thomas
Edited answer 2009ösp30ös22 Temmuz 2009 в 10:30
Yorumlar (4)

[Başka bir cevapta Dmity'nin Less koduna atıfta bulunarak] Bunun bir tür "pseudo-code" olduğunu tahmin ediyorum?

Anladığım kadarıyla sahte sütun tekniğini kullanmayı deneyin, bu işinizi görecektir.

http://www.alistapart.com/articles/fauxcolumns/

Umarım bu yardımcı olur :)

Jonathan Julian
Edited answer 2013ösp7ös17 Ağustos 2013 в 5:07
Yorumlar (2)