<div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:"> <div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:"> <div class="div1a"></div> <div class="div1b"></div> <div class="div1c"></div> </div> Here a link of layout:" />

çocuk yüksekliği div ebeveyn div dibine genişletin

Ben şu html var:

<div class="div1">
    <div class="div1a"></div>
    <div class="div1b"></div>
    <div class="div1c"></div>
</div>

Here a link of layout: http://jsfiddle.net/7ZGaG/5/

Sadece div1'e yükseklik vermem gerekiyor.

  • div1a ve div1b sabit yüksekliğe sahiptir. (Aslında div1'in sabit bir yüksekliği de vardır)
  • div1c'nin div1'in altına genişlemesi gerekir.

Örneğin:

div1:   400px
div1a: 100px
div1b: 100px
div1c:  50px

Yani altında 150px boş yer var. (400 - 100 - 100 - 50 = 150). Bunu div1c'nin div1'in dibine kadar olan CSS ile nasıl çözebilirim?

Div1c için height: 100% yaparsam, div1'in yüksekliğini alır ve bu 400 pikseldir.

Teşekkürler!

1
@Ozkan: Ben hepiniz CSS saflığıyım ama div1'in yüksekliğini ayarlamak için JavaScript kullanıyorsanız, div1c'nin yüksekliğini ayarlamak için JavaScript'i kullanabilirsiniz.
katma yazar Dan Dascalescu, kaynak
Ya yükseklik denersen: auto; div1c için
katma yazar Rohan, kaynak
Ve nedense div1c'in yüksekliğini 200 piksel'e ayarlayamazsın? Div1'in boyu hiç değişecek mi?
katma yazar dunnza, kaynak
@ Özkan, benim hatam! Bu yükseklikler dinamik olarak JavaScript ile ayarlanıyor mu?
katma yazar dunnza, kaynak
Evet kesinlikle. Javascript ile ebeveyn div'e yükseklik vermem gerekiyor
katma yazar Ozkan, kaynak
@Zach Beni çok iyi anlamadığını düşünüyorum. Ayarlayamıyorum. Çünkü div1 dinamik olmalıdır (400 piksel sabit değildir). Farklı olabilir. o zaman div1c her zaman ana div'in altına genişlemelidir (div1c ayrıca sabit bir değer olamaz)
katma yazar Ozkan, kaynak
@Rohan Sonra, kendi yüksekliğini alır (50px)
katma yazar Ozkan, kaynak

4 cevap

.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

See working example: http://jsfiddle.net/Wexcode/ENaqK/

3
katma
Ah, ne dediğini anlıyorum. Kesin olmaktan daha zekice olduğunu söyleyebilirim;)
katma yazar Wex, kaynak
Hmm, bu tam olarak ne kadar tehlikeli? Sadece yüzdürme özelliğini kullanıyor.
katma yazar Wex, kaynak
Bu teşekkürler, ama yine de biraz sahte. Ama tamam: D
katma yazar Ozkan, kaynak
Kayan şamandıra bir div yukarıdaki div bir yana olmalıdır anlamına gelir. Ama burada dikey olarak tüm divs var
katma yazar Ozkan, kaynak

İşte bunu yapacak bazı CSS.

.div1 is overflow: hidden set to grab the height of the tallest div. Which it sounds like it could be .div1a or .div1b. .div1c is position: absolute so that it can use .div1 is a guide, it positions itself off of the bottom and is put into position with top and right.

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

and a fiddle: http://jsfiddle.net/neilheinrich/7ZGaG/

0
katma
Yorumlarınıza göre biraz farklı çalışmak üzere güncellendi.
katma yazar nheinrich, kaynak
ahh, sütunlara gideceğini düşünmüştüm.
katma yazar nheinrich, kaynak
Bunu yapabilirsiniz: jsfiddle.net/neilheinrich/7ZGaG/6 . Ama dürüst olmak gerekirse, oldukça sahte.
katma yazar nheinrich, kaynak
Hayır hayır, div1c'ye sabit bir yükseklik veremiyorum. Çünkü div1 (ebeveyn) sabit yüksekliğe sahip olmamalı
katma yazar Ozkan, kaynak
Merhaba @nheinrich. Sahip olduğunuz düzen farklı. jsfiddle.net/7ZGaG/5 Burada da sorunumu görebilirsiniz. Öyleyse pembe div ebeveyn div'e genişlemeli, ama nasıl?
katma yazar Ozkan, kaynak

İşte geldiklerim ( jsfiddle'ım ):

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

Ancak, JavaScript’e erişimim olsaydı biraz daha farklı yapardım.

0
katma
Sahip olduğum şablon için lütfen ana gönderime bakın. düzen yüzen olmadan dikey
katma yazar Ozkan, kaynak

Easy solution would be to style the parent div with overflow:hidden and the child div with height:100%

Aşağıdaki özellikleri ekleyin:


For div1

konum: Sabit


For div1c

overflow:hidden; position:relative; height:100%;


Sample code - http://jsfiddle.net/7ZGaG/26/

0
katma
Soruyla ilgili örnek kod yardımcı olacaktır (bu arada ilginç cevap).
katma yazar cale_b, kaynak
Yayınımı yeni güncelledim. Örnek kodlu eklendi. Şerefe!
katma yazar Swanidhi, kaynak