Est-il impossible d'avoir une mise en page CSS-Flex pleine page sur trois lignes dans un safari mobile ?-Questions et réponses sur le réseau chinois PHP

Exemple de code : https://jsfiddle.net/Lsfvotd2/2/

Cela ne semble pas résoudre le problème de la barre d'outils flottante recouvrant complètement mon pied de page. La barre d'outils devrait disparaître lorsque vous commencez à faire défiler, mais que se passe-t-il si votre page ne défile pas ? Cela ne disparaît jamais. J'ai cherché partout mais je ne trouve pas de solution efficace. À partir de 2023, y a-t-il de nouvelles réponses ou s’agit-il simplement d’un anti-modèle qui existe dans Safari ?

Je ne veux pas simplement ajouter un remplissage, car cela briserait la conception dans des navigateurs par ailleurs raisonnables.

<header>header</header>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl.

Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices.

Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Phasellus at auctor leo. Sed blandit urna non justo ornare blandit. In sagittis tortor viverra iaculis scelerisque. Praesent fringilla sed orci quis varius.

Aliquam nec erat non ligula congue ullamcorper id sed massa. Maecenas eget ligula vel dolor suscipit elementum sed a orci. Quisque accumsan mollis lobortis. Vestibulum a lacus viverra, bibendum lacus a, dapibus nulla. Donec laoreet libero ac ante vehicula ultricies. Aenean sollicitudin gravida libero eu tempus. Sed dapibus, felis et consequat aliquet, ante nisl venenatis eros, vitae consequat neque mauris vitae justo. Vestibulum pharetra lacus in est ultricies, bibendum rutrum nisi pulvinar. Mauris ac imperdiet eros, nec convallis velit. Nulla dictum velit eget volutpat suscipit. Aenean eget arcu at ligula convallis rhoncus. Proin ut volutpat leo, nec fringilla erat. Nam pulvinar mattis erat et euismod. Fusce nisl nunc, ultricies ac nulla et, fermentum consequat tellus. Aenean id orci eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl.

html, body {
margin:0;
height:100%;
min-height:100%;
}
body {
margin:0;
display: flex;
flex-direction: column;
}
header {
order: 1;
flex-shrink: 0;
flex-basis: 50px;
background:red;
z-index: 10;
}
article {
order: 2;
overflow-y: scroll;
background:green;
}
footer {
order: 3;
flex-shrink: 0;
flex-basis: 50px;
background:blue;
z-index: 1000;
}

répondre à tous(1)

P粉4788355922023-09-16 15:46:23 1 plancher

Je ne parviens pas à reproduire le problème. J'ai mis votre code dans cette page et je l'ai testé dans Safari mobile. Je peux voir le pied de page et la barre d'outils est visible et peut être masquée (pour masquer la barre d'outils sans faire défiler, appuyez sur le bouton AA sur le côté gauche de la barre d'outils et sélectionnez Masquer la barre d'outils).

Comme +0

Ajouter une réponse