dikey hizalama sorunları

Birisi bana burada neyi yanlış yaptığımı söyleyebilir mi? İçinde% 100 ve iki div içinde bir sarıcı var. Üst div, sarıcının üst kısmında olmalı ve alt divun sarıcının alt kısmında olması gerekir. Çalışmıyor.dikey hizalama sorunları

İşte sahip olduğum şey. Her iki iç div üzerinde dikey hizalamayı denedim, ama ya çalışmıyor.

<style> 
#wrap { 
width:210px; 
height:100%; 
border:1px solid red; 
} 
#top { 
width:200px; 
height:100px; 
margin:0 auto 0 auto; 
border:1px solid green; 
} 
#btm { 
width:200px; 
height:100px; 
position:relative; 
bottom:0; 
margin:0 auto 0 auto; 
border:1px solid red; 
} 
</style> 
</head> 
<body> 
    <div id="wrap"> 
    <form method="post" action=""> 
     <div id="top"> 
adf 
     </div> 
     <div id="btm"> 
adf 
     </div> 
    </form> 
    </div> 
</body> 
</html>

kaynak

2010-11-18 Jim

hangi tarayıcıyı kullanıyorsunuz? Rendering motorları, ne de teknik özelliklere göre üretilmemiştir .... –

Opera, Chrome ve FF – Jim

bu deneyin:

#wrap{ 
width:210px; 
height:100%; 
border:1px solid red; 
position:relative; 
} 

#top { 
float:left; 
width:100%; 
height:100px; 
position:relative; 
margin:0 auto 0 auto; 
border:1px solid green; 
} 
#btm { 
float:left; 
width:100%; 
height:100px; 
position:relative; 
bottom:0; 
margin:0 auto 0 auto; 
border:1px solid red; 
}

kaynak

2010-11-18 20:42:17 wajiw

Teşekkürler wajiw. Hala çalışmıyor. :( – Jim

Biraz daha derinlerde neler olduğunu anlatabilir misin? – wajiw

@wajiw, Her iki iç div üst üste dizilmiş, birbiri üstüne yığılmış – Jim

o, ben pozisyonunu çıkardı çalışıyor görünüyor ~~: bağıl; Eğer buna ihtiyacı yoktur:~~

~~buradan bakın: http://jsfiddle.net/kByXS/~~

düzenleme: o çözüldü burada

: http://jsfiddle.net/SebastianPataneMasuelli/kByXS/2/

html:

<div id="wrap"> 
    <form method="post" action=""> 
     <div id="top"> 
      top 
     </div> 
     <div id="btm"> 
      bottom 
     </div> 
    </form> 
</div>

i sorununuzu yanlış

css:

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    background-color: gray; 
} 
#wrap { 
    width:210px; 
    height:100%; 
    border:1px solid red; 
    position: relative; 
} 
#top { 
    width:200px; 
    height:100px; 
    margin:0 auto 0 auto; 
    border:1px solid green; 
} 
#btm { 
    width:200px; 
    height:100px; 
    margin:0 auto 0 auto; 
    border:1px solid blue; 
    position: absolute; 
    bottom: 0; 
left: 5px; 
}

tuşları:

ilk, sonra div dikey% 100 streç olacak html ve vücut% 100 yüksekliğini verir.
kapsayıcı hiçbir sol veya üst değerlere sahip bir position: relative vermek
senin altında vermek div bir (o göreceli konteyner div yapar) position: absolute ve bottom: 0;

kaynak

2010-11-18 20:44:54

Gördüğüm, btom ve üst divların birleştirilmiş olduğu aynı yüksekliğe kadar uzanan bir sarmalayıcı.Örneğimde benim formumdaki gibi bana benziyor. Sargının yüksekliğini% 100 yapın ve sonra içteki divların diğerinin üzerine yığıldığını göreceksiniz. – Jim

güncelleştirilmiş örneği kontrol edin, bence istediğin şey bu –

Evet Sebastian, işe yarıyor. Teşekkür ederim. Bununla ilgili bir sorum var ... Siteye yayılacak çünkü formuma% 100 yükseklik ekleyemiyorum. Sarıcıda sadece% 100 yükseklik istiyorum. Bu sarmalayıcı, sitenin içinde bir kenar çubuğu. – Jim

hangi tarayıcı çalışmıyor ise ? Chrome'da bana göre iyi görünüyor:

alt text

kaynak

2010-11-18 20:48:36

Paul, sarmalayıcı div ekranı% 100'dür, bu da ekran görüntüsünüzden belli değildir. Sadece FF ve Chrome'da denedim ve çalışmıyor. – Jim

@Jim - Sağladığınız kodu bir dosyaya yapıştırdım ve ekran görüntüsü, Chrome'da bu kodun nasıl oluşturulduğunu ve bu konuyla ilgili Firefox'dur. Ekrana "# wrap" in daha uzun olduğu farklı bir tarayıcıda mı bakıyorsunuz? Eğer öyleyse, hangi tarayıcı? –

Paul, FF, Chrome'un yanı sıra Opera'ya sahibim ve hepsinde tam olarak aynı şeyi yapıyor. Wrapper div ** 'in% 100 yükseklikte olması gerektiğini biliyor musunuz **? – Jim

dikey hizalama sorunları

cevap

İlgili konular