Nested Flexbox 100% Altezza non funziona in Safari

Sono nuovo di Flexbox e sto cercando di usarlo per creare un layout con un'intestazione fissa, un piè di pagina fisso e un'area di contenuto che riempie lo spazio disponibile tra intestazione e piè di pagina. L'area del contenuto è un'area scorrevole che ha 3 pannelli (div), ognuno dei quali ha il 100% di altezza. Per scopi dimostrativi, inserisco il a, b, c (si riferisce ad essi come testo a Pannello, Pannello b e Pannello c) sopra ciascun pannello.Nested Flexbox 100% Altezza non funziona in Safari

In Firefox v39, il pannello a, bec occupa l'intera altezza del contenitore scorrevole.

In Safari (v 8.0.6 (10600.6.3)), ciascuna altezza del pannello è leggermente più alta del contenitore. Se si scorre fino all'ultimo pannello (pannello c), il titolo "c" non viene più visualizzato quando il contenuto viene fatto scorrere verso il basso. Questo non è il caso di Firefox.

Il comportamento desiderato è il comportamento in Firefox.

Ecco lo codepen.

<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Sample</title> 
    <style> 
     html, body { 
      height: 100%; 
      width: 100%; 
      font-size: 100%; 
      margin: 0px; 
      font-family:open-sans; 
      font-style: normal; 
      font-weight: 400; 
     } 
     *, *:before, *:after{ 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      -ms-box-sizing: border-box; 
      box-sizing: border-box; 

     } 
    </style> 
</head> 

<body> 
    <div style="height: 100%; width: 100%; ;display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column;"> 
     <div style="width:100%; min-height: 50px;"> 
      header<br>header<br>header<br> 
     </div> 
     <div style="display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; width:100%; height: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -ms-flex: 1 1 auto; "> 
      <div style="overflow-y: auto; width:100%; height: 100%; border:red solid thin"> 
       <div style="width:100%; height: 100%; border:green solid thin"> 
        a 
       </div> 
       <div style="width:100%; height: 100%; border:green solid thin"> 
        b 
       </div> 
       <div style="width:100%; height: 100%; border:green solid thin"> 
        c 
       </div> 
      </div> 

     </div> 
     <div style=" min-height:30px; border:blue solid thin;"> 
      footer 
     </div> 
    </div> 
</body>

Grazie.

fonte

2015-07-15 pb1111

Quindi qual è il tuo comportamento desiderato? Firefox? – initialxy

Sì, il mio comportamento desiderato è FF. Grazie – pb1111

L'interpretazione del modello di box CSS qui è un po 'strana. Sono riluttante a dire chi ha ragione e chi ha torto. Ma comunque, il trucco è creare un wrapper contenente a, b, e c, che abbia position: absolute; top: 0; bottom: 0; width: 100%; e assicurarsi che il suo genitore abbia position: relative;. Vedi codepen

fonte

2015-07-15 04:58:43 initialxy

Questa è una buona soluzione, ma nel mio caso avevo bisogno di avere delle larghezze degli elementi interni che definiscono le larghezze (in questo caso era testo in alcuni link di navigazione.Ai ho finito per impostare l'altezza del contenitore e ho avuto successo. Vedi questa risposta: http://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent –

Sembra un bug in WebKit: https: //bugs.webkit .org/show_bug.cgi? id = 137.730 – benface

Nested Flexbox 100% Altezza non funziona in Safari

risposta

Problemi correlati