Ebeveyne göre div% 100 yükseklik nasıl oluşturulur?

Aşağıdaki gibi bir şey ile sıkışmış. Sağ üst div% 100 yükseklik yapmalıyım (bgcolor'u ana divun tam yüksekliğini kaplayacaktır).Ebeveyne göre div% 100 yükseklik nasıl oluşturulur?

<body> 
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;"> 
     <div id="left" style="float: left; width: 600px; background-color: #A7C864;"> 
      <div id="left-top">left-top</div> 
      <div id="left-bottom">left-bottom</div> 
     </div> 
     <div id="right" style="float: right; width: 200px; background-color: #C7E48E;"> 
      <div id="right-top">right-top</div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body>

burada örnek çalışma: http://marioosh.net/lay1.html

kolaydır tabloyu kullanarak: http://marioosh.net/lay2.html

kaynak

2011-01-21 marioosh

bile bu div tüm hakkında ne olduğunu anlamak değil düşündürmektedir teşebbüs. Eğer bu tabloyu kullanmak istiyorsan, div değil. Eğer div Main'in yüksekliği sol div için yüksekliğini ayarlamak, o zaman div sağa koymak% 100 ama çeşit aptal belli ki daha sonra div sağ yüksekliğini gönderilen çünkü şu olabilir. – Myforwik

Öyleyse, bana div'in ne olduğunu söyle? – marioosh

bunları kontrol edin. Eminim yardımcı olurlar. [Question1] (http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height) [question2] (http: Yani div ile tüm bu doldurma/marj kesmek kötü bir şey taklit //stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – ayush

-2

sen 100% yüksekliğini sağlamak için ana unsurlarından yükseklikleri ayarlamanız gerekir. Eğer yükseklik% 100 hem ayarlarsanız size

kaynak

2011-01-21 08:51:02

ben o ana div% 100 yüksekliği – marioosh

Ben (tablo tabanlı örneğe bağlantı çalışmıyor) soru yanlış anlama olabilir aradığınız efekt elde olmalı, ama sen gibi geliyor eşit yükseklikte iki sütun oluşturmaya çalışıyor.

Büyük bir alt dolgu her DIV verebilir ve eşit derecede büyük, ama negatif, alt kenar boşluğu: kullanabileceğiniz birkaç teknik vardır, burada üçü vardır.
```
#main { 
    overflow: hidden; 
} 
#left, #right { 
    float: left; 
    padding-bottom: 1000em; 
    margin-bottom: -1000em; 
} 
```
Bu çözüm, bu sorun olmadan olmaz; Eğer (eğer id=foo ile sütunlardan birinin bir öğeyi var mesela ve mypage.html#foo bağlantı veren) sütunlardan birinde bir öğeye bağlamak çalışırsanız o zaman düzeni kıracak. Bu tekniği kullanarak alt kenarlık eklemek de zordur. Natalie Downe dan

için tam bir örnek: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
Sen sütunlardan birini negatif sağ kenar ve diğer çok geniş sol sınır verebilir. Smashing Magazine
```
#left, #right { 
    float: left; 
} 
#left { 
    background: red; 
    width: 200px; 
    margin-right: -200px; 
} 
#right { 
    border-left: 200px solid red; 
} 
```
fazla bilgi: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
yapabilirsiniz sahte her iki sütunlar için arka plan içeren bir arka plan görüntüsü #main vererek. Bu teknik “Faux Columns” olarak bilinir ve karmaşık arka planlar veya sütunlar arasında dekoratif bir sınır istediğinizde kullanışlıdır. Ayrı Bir Listesinde

fazla bilgi: soru kaydetti http://www.alistapart.com/articles/fauxcolumns/

üzerine yorumcu biri olarak ayrıca bir tablo kullanabilirsiniz. Ancak, TABLE tabular verilerini görüntülemiyorsanız, uygun HTML öğesi değildir.

kaynak

2012-02-05 20:26:16 georgebrock

sahip gerekmez 15 yılı aşkın süredir masaları kullanarak "uygun" HTML elemanı mıdır? Garip ... – bfritz

Ebeveyne göre div% 100 yükseklik nasıl oluşturulur?

cevap

İlgili konular