Kenar boşluğu:% 100 üst genişlik değerini alır ... garip

Çoğu tarayıcıda (örneğin, ff, krom, safari) çok garip "sorun" var. Kenar boşluğu:% 100 üst genişlik değerini alır ... garip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     html{ 
      outline: 1px #0ff solid; 
      background: rgba(0,255,255,0.1); 
     } 
     body{ 
      margin: 0; 
      padding: 0; 
      outline: 1px #00f solid; 
      background: rgba(0,0,255,0.1); 
     } 
     #aDiv{ 
      width: 300px; 
      outline: 1px #f00 solid; 
      background: rgba(255,0,0,0.2); 
     } 
     #bDiv{ 
      margin-top: 100%; 
      outline: 1px #0f0 solid; 
      background: rgba(0,255,0,0.1); 
     } 
    </style> 
</head> 
<body> 
    <div id="aDiv"> 
     <div id="bDiv"> 
      content 
     </div> 
    </div> 
</body> 
</html>

Sen #aDiv genişliğini değiştirmek

ardından #bDiv margin-top aynı değere sahip değişecek: İşte örnek kodudur. Nasıl mümkün olduğunu bilmiyorum, bu yükseklik genişliğe gider. Neyse, belki biriniz bana neler olduğunu açıklayabilir mi?

Saygılarımızla;)

kaynak

2011-10-05 Artnova Art

Bu aslında yüzde üretilen çerçevenin içeren blok genişliği ile ilgili olarak hesaplanır according to the spec

< yüzde > olup. Bunun, 'kenar boşluğu' ve 'kenar boşluğu' için de geçerli olduğunu unutmayın. İçeren bloğun genişliği bu öğeye bağlıysa, sonuçta ortaya çıkan düzen CSS 2.1'de tanımsızdır.

Oldukça yararsız değil mi? position: absolute ve bottom: 0 kullanmayı düşündünüz mü? Aradığın şeylerden daha fazlası olabilir.

kaynak

2011-10-05 13:04:07

Oldukça farklı bir şey üzerinde çalışıyordum, ancak tarayıcılar her zaman beklendiği gibi çalışmıyorlar, çünkü tamamen rastgele özellikler test ediyordum, çünkü marj-top:% 100 biraz saçma. Ve (dikey) kenar boşluğu/kenar boşluğu ve (yatay) genişlik arasında garip bir ilişki kuruyorum. Dediğin gibi, yararsız;) –

Ne yazık ki, standart ama iyi şanslar ile uyumludur. –

standartta bu tür bir moronu koyuyor .. bu .. neredeyse inanılmaz aptal, yatay değerler üzerinde dikey yüzdelere dayanıyor. – Noishe

#bDiv{ 
     margin-top: 100%; --> This need to change 
     outline: 1px #0f0 solid; 
     background: rgba(0,255,0,0.1); 
    }

Onun değil garip bir sorun. Bu bDivaDiv ebeveynüst olduğu için margin-top% 100 olarak ayarladınız,genişliği margin-top olarak alın.

kaynak

2011-10-05 13:03:26

Bu sorunun nasıl kaldırılacağı açıktı, ancak neden merak ettim, dikey yüzde yatay ebeveyn genişliğinden neden değer alıyor? Hiç bir şey ifade etmiyor ... –

araçlarının bu kaldırırsanız margin-top: 100%;

sahip bDiv üzerinde CSS ile yapmak hepsi, her şey yine normal işlev görür.

kaynak

2011-10-05 13:06:52 Luke

, bu sorunun nasıl kaldırılacağı açıktı, ancak nedenini merak ettim, dikey yüzde yatay ebeveyn genişliğinden neden değer alıyor. Hiç bir anlamı yok... –

Lütfen Kasun'un cevabına bakın – Luke

viewport ilgili birimlere (1vw = viewport genişliğinin% 1'i, 1vh = 1% viewport yüksekliği) deneyebilirsiniz.

margin-top: 90vh; denediniz?

kaynak

2015-01-21 21:47:08 cptstarling

teşekkürler, bu değerleri daha fazla kullanmalıyım! – domiSchenk

Kenar boşluğu:% 100 üst genişlik değerini alır ... garip

cevap

İlgili konular