Margine superiore: il 100% ottiene il valore della larghezza genitore ... strano

Ho un "problema" molto strano, nella maggior parte dei browser (ad esempio, ff, chrome, safari). Ecco codice di esempio:Margine superiore: il 100% ottiene il valore della larghezza genitore ... strano

<!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>

quando si cambia la larghezza #aDiv, quindi #bDiv margin-top cambieranno con lo stesso valore. Non so come sia possibile, quell'altezza va in larghezza. Ad ogni modo, forse uno di voi potrebbe spiegarmi che cosa sta succedendo?

migliori saluti;)

fonte

2011-10-05 Artnova Art

Questo è in realtà according to the spec

<percentuale> La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato. Notare che questo è vero per 'margin-top' e 'margin-bottom' pure. Se la larghezza dello del blocco contenitore dipende da questo elemento, il layout risultante non è definito in CSS 2.1.

Abbastanza inutile, giusto? Hai preso in considerazione l'utilizzo di position: absolute e bottom: 0? Potrebbero essere più di quello che stai cercando.

fonte

2011-10-05 13:04:07

Stavo lavorando su cose completamente diverse, tuttavia dato che i browser non funzionano sempre come previsto, stavo testando attributi totalmente casuali, come margin-top: il 100% è un po 'sciocco. E ottengo una strana correlazione tra (verticale) margine superiore/margine inferiore e orizzontale (orizzontale). Come hai detto, abbastanza inutile;) –

Sfortunatamente, è conforme allo standard, ma buona fortuna. –

che tipo di deficiente ha messo questo nello standard ... è ... incredibilmente incredibile, basando le percentuali verticali su valori orizzontali. – Noishe

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

suo non è un problema strano. Questo perché hai impostato il margin-top al 100%, dal momento che aDiv è il genitore di bDiv prende la larghezza di aDiv come margin-top.

fonte

2011-10-05 13:03:26

mi è stato chiaro come rimuovere questo problema, tuttavia ero curioso del motivo, perché la percentuale verticale ottiene valore dalla larghezza genitore orizzontale. Non ha senso ... –

E 'tutto a che fare con il CSS su bDiv avere margin-top: 100%;

Se si rimuove questo, tutto ciò che agisce di nuovo normale.

fonte

2011-10-05 13:06:52 Luke

mi è stato chiaro come rimuovere questo problema, tuttavia ero curioso del motivo, perché la percentuale verticale ottiene valore dalla larghezza genitore orizzontale. Non ha senso... –

Per favore fai riferimento alla risposta di Kasun – Luke

Si potrebbe provare unità relative viewport (1vw = 1% di larghezza della finestra, 1vh = 1% di altezza della finestra).

Provato margin-top: 90vh;?

fonte

2015-01-21 21:47:08 cptstarling

grazie amico, devo usare di più questi valori! – domiSchenk

Margine superiore: il 100% ottiene il valore della larghezza genitore ... strano

risposta

Problemi correlati