Soru CSS - göreceli olarak konumlandırılmış ebeveyn div mutlak çocuk div yüksekliğine kadar uzanmıyor


Bütün sabah bunu yönetiyorum ve işe yaramayacak gibi görünmüyor:

Bağıl konumlu bir ana DIV'im ve içinde hem Mutlak hem de konumlandırılmış iki sütun alt yapısı DIV ayarı var. İç DIV'lerin içeriği ile germek için ebeveyn DIV'nin yüksekliğine ihtiyacım var.

#Content için kapanış etiketlerinden önce bir .clearfix türü biti koymaya çalıştım ama hiçbir şey yüzmem. Ayrıca #content div'e boşuna bir özellik eklemeye çalıştım. Beni burada doğru yöne yönlendiren var mı? Açıkçası yuvalanmış ekranların birbirini nasıl etkilediğiyle ilgili bir şey eksik.

CSS:

#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}

#leftcol { 
width: 500px;
position: absolute;
}

#rightcol {
width: 270px;
position: absolute;
left: 500px;
margin-left: 10px;
text-align: center;
}

HTML:

<div id="content">

<div id="leftcol">
<p>Lorem Ipsum</p>
</div><!-- /leftcol -->

<div id="rightcol">
<img src="images/thumb1.jpg">
<img src="images/thumb2.jpg">
</div><!-- /rightcol -->

<br style="clear:both;">

</div><!-- /content -->

44
2017-11-18 15:40


Menşei


Cevap alma zamanı? - Luke Alderton


Cevaplar:


Kuvvetin karanlık tarafı, bazılarının doğal olmadığı düşünülen pek çok yetenek için bir yoldur.

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});​

101
2017-11-18 16:21



Bunu açıklamanız için tamamen oy kullandım. - Beans


takas işleri ama garip sonuçlar vardı. sonra tüm tarayıcılarda çok daha kolay ve mükemmel yapan bir yazı buldum.

Çocuğunuzun divanlarını yüzmeye ayarlayın: sol / sağ. Ardından ebeveyn üzerine "taşma: gizli" koyun. Bir yükseklik belirtmediğiniz için, yalnızca çocuk öğelerini mükemmel bir şekilde saracak. Ben kullanmıyorum şimdi yaşları temizlerim.


6
2017-11-18 16:09



Bu ebeveyn div's yüksekliği mutlak konumlandırılmış çocuk ile büyümek yapmaz! - Nielsm
Bildiğim @Nielsm, bu yüzden neden “çocuğunuzun yüzdelerini yüzmeye” dedim (mutlak konumlandırılmış değil). Gelecekte yorum yapmadan önce tüm cevabı okumaya çalışın, sizi aptalca göstererek kaydeder. - Lee
Üzgünüm yanlış yorum yazdım. Aslında pozisyon değiştirdim: mutlak ile mutlak: sol. Benim davamda hile yapmaz. - Nielsm
@Nielsm genişlik eklemeyi deneyin: ebeveyn div'a da% 100 (ebeveyn% 100 genişlik olmalıdır). Sadece tarayıcının ana boyutları algılayabileceğini düşünüyorum. Ancak bu 3 yıllık bir cevaptır ve uzun zamandır ön çalışma yapmamıştım. Belki de yeni bir soru ya da en azından sorunlarınız için bir jsfiddle oluşturmaya çalışın (bu işin tamamlanması için birkaç web sitem var), fakat her düzeltmede olduğu gibi doğru uygulanması ve her durumda uygun olmaması gerekir. - Lee
@Lee, cevabınızdan float yapmak zorunda olduğunuzdan belli değil: sol yerine konum: mutlak. Bunu düzenlemelisin. - WoodrowShigeru


Sütun div'leriniz, normal sayfa akışından kaldırıldıklarında mutlak konumlarına sahip oldukları için, içeren div'ları etkilemez.

Bunun yerine, onları yüzmeyi deneyin, sonra açık bir div var: her ikisi de; onlardan sonra.


4
2017-11-18 15:50



Yani, ebeveyn div her zaman içeriğin altına germek için en iyi bahis, sırasıyla her sütun sol ve sağa kayan olurdu? - user1054093
Her ikisini de solabilir ya da ikisini de sağa solabilir ya da önemli olmayan her şekilde yüzebilirsiniz. Eğer açık bir div varsa: ikisi de; onların altında (hala ebeveyn divun içinde) ebeveyni div, iki kolonunuzun altına uzanacaktır. - Helen


Sadece bir süredir bununla uğraştım ve gerçek bir çözüm buldum CSS sadece 'mutlak' divların konumlarını 'göreceli' olarak değiştirmektir. Bu gerçekten çalışıyor!

Safari 5.1.5 ve Chrome 21.0'ı kullanarak bir Mac üzerinde test edildi.

Umarım bu bir başkasına yardım eder.


2
2017-08-21 22:34



Mutlak divlar gerekli ise bu problemi çözmez - Shawn Northrop


İhtiyacın yok position: absolute bu görev için.

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol { 
    width: 500px;
    float: left;
}

#rightcol {
    width: 270px;
    position: relative;
    margin-left: 510px;
    text-align: center;
}

1
2017-11-18 15:49



Bu işe yarıyor ama bana sağ ya da sol sütunun ana baba boyunu zorlama yeteneğini vermiyor, ancak cevabını takdir ediyorum ve cevabınızdan bir şeyler öğrendim. - user1054093
Ebeveyn divunun yüksekliği, çocuğun divlarının yüksekliği ile büyür. ayrılman gerek clear:both Sorunuzdaki gibi html - DanielB