HTML5 calcolo altezza modello scatola flessibile

dopo aver ricercato il modello di box flessibile per un'intera giornata, devo dire che mi piace davvero. Implementa la funzionalità che implemento in JavaScript in modo rapido e pulito. Una cosa però mi infastidisce:HTML5 calcolo altezza modello scatola flessibile

Non riesco a espandere un div per prendere l'intera dimensione calcolata dal modello di box flessibile !!!

Per illustrarlo, mi dimostrerò un esempio. In esso i due punti flessibili prendono esattamente l'esattezza e l'altezza, ma il div al suo interno prende solo l'altezza dell'elemento "<p>...</p>". Per questo esempio non importa, ma quello che in origine cercavo è stato mettere un "box model flessibile" all'interno di un altro "modello flessibile di dialogo", e questo deve essere possibile, a mio parere

html, body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#box-1 { 
 
    background-color: #E8B15B; 
 

 
} 
 
#box-2 { 
 
    background-color: #C1D652; 
 
} 
 
#main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
} 
 

 

 
.flexbox { 
 
    display:-moz-box; 
 
    display:-webkit-box; 
 
    display: box; 
 
    text-align: left; 
 
    overflow: auto; 
 
} 
 
H1 { 
 
    width: auto; 
 
} 
 
#box-1 { 
 
    height: auto; 
 
    -moz-box-orient: vertical; 
 
    -webkit-box-orient: vertical; 
 
    box-orient: vertical; 
 

 
    -moz-box-flex: 3; 
 
    -webkit-box-flex: 3; 
 
    box-flex: 3; 
 
} 
 
#box-2 { 
 
    height: auto; 
 
    min-width: 50px; 
 
    -moz-box-orient: vertical; 
 
    -webkit-box-orient: vertical; 
 
    box-orient: vertical; 
 

 
    -moz-box-flex: 1; 
 
    -webkit-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 
#fullsize{ 
 
    background-color: red; 
 
    height: 100%; 
 
}

<div id="main" class="flexbox"> 
 
    <div id="box-1" class="flexbox"> 
 
    <div id="fullsize"> 
 
     <p>Hallo welt</p> 
 
    </div> 
 

 
    </div> 
 
    <div id="box-2" class="flexbox"> 
 

 
    </div> 
 
</div>

fonte

2011-10-06 Stefan

Sono stato alle prese con questo me stesso, ma sono finalmente riuscito a trovare una soluzione.

Vedere questo jsFiddle, anche se ho aggiunto solo prefissi webkit così aperto in Chrome.

Fondamentalmente hai 2 problemi che tratterò separatamente.

Ottenere il figlio di un flex-oggetto per riempire altezza 100%
- Imposta position:relative; sul genitore del bambino.
- Set position:absolute; sul bambino.
- È quindi possibile impostare larghezza/altezza come richiesto (100% nel mio campione).
Risolvere il ridimensionamento scrolling "quirk" in Chrome
- Mettere overflow-y:auto; sul div scorrevole.
- Il div scorrevole deve avere un'altezza esplicita specificata. Il mio campione ha già altezza 100%, ma se non viene già applicato è possibile specificare height:0;

Vai a questa answer per ulteriori informazioni sul problema di scorrimento.

fonte

2013-03-13 14:33:46

L'altezza '100%' genera un bug del webkit? O è definito nella raccomandazione del W3C? – Xenos

poiché vi è un certo interesse in questa domanda, ti darò la soluzione attuale che ho trovato. È un test in cromo (nessun altro browser attualmente funziona con questo esempio, ma ha un altro più grande nel lavorare in FF che in qualche modo non funziona quando "faccio semplicemente" ...).

L'idea dietro di esso è, in qualche modo, rendere l'elemento annidato all'interno della scatola flessibile estendere alle dimensioni dell'intero elemento di scatola flessibile. Per fare ciò viene aggiunto un elemento di posizione assoluta, che ha 0 distanza a sinistra, a destra, in alto e in basso.

Tuttavia, anche in Chrome, si verifica un errore durante il ridimensionamento e il ridimensionamento dell'elemento in modo che la barra di scorrimento scompaia.

Ecco il codice html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>flexbox example - 2 column layout</title> 
    <meta name="author" content="Gwilym Johnston"> 
    <style type="text/css"> 
    html, body{ 
     height: 100%; 
     margin: 0px; 
    } 
    #box-orient-example { 
     -moz-box-orient: horizontal; 
     -webkit-box-orient: horizontal; 
     -ms-box-orient: horizontal; 
     box-orient: horizontal; 
     display: -moz-box; 
     display: -webkit-box; 
     display: -ms-box; 
     display: box; 
     height: 100%; 
     overflow: auto; 
    } 
    #box1 { 
     -moz-box-flex: 1; 
     -webkit-box-flex: 1; 
     -ms-box-flex: 1; 
     background: none repeat scroll 0 0 lightblue; 
     text-align: center; 
     overflow: auto; 
     position: relative; 
    } 
    #box2 { 
     -moz-box-flex: 1; 
     -webkit-box-flex: 1; 
     -ms-box-flex: 1; 
     background: none repeat scroll 0 0 #DDDDDD; 
     text-align: center; 
     overflow: auto; 
     position: relative; 
    } 

    .abs { 
     position: absolute; 
     top: 0; 
     right: 0; 
     left: 0; 
     bottom: 0; 
    } 
    .rel{ 
     position: relative; 
    } 
    </style> 
</head> 
<body> 
    <div id="box-orient-example" class="example"> 
     <div id="box1"> 
      <div class="abs"> 
       <div class="rel"> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
       </div> 
      </div> 
     </div> 
     <div id="box2"> 
      <div class="abs"> 
       <div class="rel"> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </div> 
     </div> 
    </div> 
</body> 
</html>

fonte

2012-01-09 10:15:05 Stefan

È inoltre necessario il div si desidera espandere un flex-box come bene e aggiungere un valore flex. Questo risolve il problema.

#fullsize{ 
    background-color: red; 

    display: -webkit-box; 
    display: box; 
    display: -moz-box; 

    box-flex:1; 
    -webkit-box-flex:1; 
    -moz-box-flex:1; 
}

fonte

2012-05-03 09:51:23

HTML5 calcolo altezza modello scatola flessibile

risposta

Problemi correlati