Cercando di ottenere una disposizione in flexbox utilizzando materiale angolare dove la navigazione e il piè di pagina hanno un'altezza fissa, il contenuto sarà scorrevole (utilizzando il contenuto md) e il piè di pagina dovrebbe apparire dopo il contenuto scorrevole. La mia soluzione funziona bene in chrome e firefox, ma non in safari. In Safari, il piè di pagina viene visualizzato nella parte inferiore della finestra, sovrapposto al contenuto scorrevole. Un modo per ottenere lo stesso effetto su tutti i browser?Il layout CSS della CSS non funziona in safari

html:

<!DOCTYPE html> 
<html> 

    <head> 

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" /> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 

    <link rel="stylesheet" href="style.css" /> 

    </head> 

    <body layout='column'> 

    <div id='nav'> 
     Nav 
    </div> 

    <md-content flex layout='column'> 

     <div id='content' flex> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 

     <div id='footer'> 
     Footer 
     </div> 

    </md-content> 

    </body> 

</html>

css:

* { 
    margin: 0; 
} 

body { 
    overflow: hidden; 
    max-width: 100%; 
    max-height: 100%; 
} 

#nav{ 
    background-color: green; 
    -webkit-flex: 0 0 65px; 
    flex: 0 0 65px; 
} 

#content{ 
    background-color: blue; 
} 

#footer{ 
    background-color: red; 
    -webkit-flex: 0 0 115px; 
    flex: 0 0 115px; 
}

plunkr:

http://plnkr.co/edit/ibi6v1LTy9dLducHuMdM

fonte

2015-08-06 Bill Johnston

#content { 
    -webkit-flex: 1 0 auto; 
    flex: 1 0 auto; 
}

sarebbe sufficiente.

fonte

2015-08-07 20:46:32 gavin19

la gerarchia è un po 'traballante, e sembra che Safari è alle prese con questo.

Spostando il footer per essere un fratello degli elementi #nav e e rimuovendo gli schermi flessibili ridondanti, è possibile ottenere il layout che si sta cercando.

Nuovo HTML:

<div id="nav"> 
     Nav 
    </div> 
<md-content layout="column"> 
    <div id="content"> 
    <p>...</p> 
    ... 
    <p>...</p> 
    </div> 
</md-content> 
<div id="footer"> 
    Footer 
</div>

Nuovo CSS:

#content{ 
    background-color: blue; 
    -webkit-flex: 1 1; 
    flex: 1 1; 
}

`Plunkr Example`

fonte

2015-08-06 21:50:26

Ho bisogno di un piè di pagina appiccicoso, non fisso. Grazie però –

Sticky nel senso che segue il contenuto? Quindi inseritelo nel contenuto ed evitate del tutto il flex sull'elemento. Non hai bisogno di un display flessibile per questo. Ecco un esempio: http://plnkr.co/edit/M4KeFHNTyumbd5H6s7bg?p=preview –

Sì, ma quando il contenuto non scorre, il piè di pagina dovrebbe apparire nella parte inferiore dell'altezza della vista. In questo modo: [https://css-tricks.com/snippets/css/sticky-footer/](https://css-tricks.com/snippets/css/sticky-footer/). Non riesco a farlo funzionare all'interno del contenuto md. –

Il layout CSS della CSS non funziona in safari

risposta

Plunkr Example

Problemi correlati

`Plunkr Example`