1485 sujets

Web Mobile et responsive web design

[Résolu] Grid, flex (table ???) Je n'y arrive pas

Hello again,
Je cherche à faire une mise en page très contrainte et responsive en fonction de l'orientation portrait/paysage pour un affichage sur la fenêtre complète (100vw x 100 vh, en somme).
Je coupe mon écran en deux (2 colonnes en portrait ou 2 lignes en paysage) puis je partage ma première partie en 3 parties inégales (15%, 75%, 10%) et la deuxième partie en 4 parties égales.
J'étais à peu près arrivé au résultat escompté avec des "grid" mais le contenu déborde (on partira du principe que le texte ne pas pas déborder).

En paysage, la mise en page souhaitée est la suivante :
upload/1512427273-23432-paysage.png
et en portrait
upload/1512427384-23432-portrait.png

Ma structure est donc la suivante

<div id="main">
 <div id="question">
   <div hauteur="15%">Titre</div>
   <div hauteur="75%">Long texte</div>
   <div hauteur="10%">STOP-PLAY-REWIND</div>
 </div>  
 <div id="reponses">
	<div hauteur="25%" class="rep">Texte moyen 1</div>
	<div hauteur="25%" class="rep">Texte moyen 2</div>
	<div hauteur="25%" class="rep">Texte moyen 3</div>
	<div hauteur="25%" class="rep">Texte moyen 4</div>
 </div>
</div>


Le code "responsive" est déclenché par les directives CSS qui vont bien.
J'avais tenté comme suit :

@media screen and (orientation: landscape) {
	#main{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (orientation: portrait) {
	#main{
		grid-template-rows: repeat(2, 1fr);
	}
} 

#question {
    display: grid;
    grid-template-rows: 1fr 7fr 25px; /* On peut simplifier avec 15%,75%,10% */
}

#reponses{
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 1em;
}


Il faut évidemment que le résultat s'affiche convenablement sur mobiles iOS/Android et desktop avec des navigateurs à jour.
Administrateur
Hello,

Je n'ai pas testé, mais il faudrait commencer par donner une hauteur explicite à .main pour qu'il n'occupe pas que la hauteur de ses contenus. Essaye min-height: 100vh; pour commencer.
Effectivement, je n'ai pas balancé le code complet parce que j'ai essayé de simplifier pour exposer mon problème.
Mon "main" est prévu pour s'afficher en "full window"
#main {
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	min-height: 100vh;
	width:100vw;
}


J'observe une chose curieuse avec les grid, comme si le calcul était perturbé par d'autres éléments affichés pourtant sur dans une autre div (par exemple : la barre d'admin WordPress).
En gros, j'arrive à maîtriser la largeur d'affichage, mais je n'arrive pas à caler la hauteur avec précision (j'ai mis du "box-sizing: border-box;" un peu partout Smiley cligne pour ne pas répéter l'erreur de mon précédent post sur le forum).
Salut,

Je ne suis pas certains d'avoir la meilleure solution, mais chez moi ça fonctionne (pc et téléphone portrait/paysage)

J'utilise un flex-wrap: wrap pour que ma disposition row, affiche les deux bloc l'un au dessus de l'autre lorsque qu'on passe en width:100% en portrait. Et height:50% pour avoir les deux blocs affiché à l'écran sans scroll

<!DOCTYPE html>

<html lang="fr">

  <head>
    <meta charset="utf-8" />
    <title>Responsive</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      
      #firstColumn {
        width: 50%;
        height: 100%;
      }
      
      #secondColumn {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      
      #firstColumn header {
        width: 100%;
        height: 15%;
        background: purple;
      }
      
      #firstColumn footer {
        width: 100%;
        height: 10%;
        background: yellow;
      }
      
      #main {
        width: 100%;
        height: 75%;
        background: orange;
      }
      
      #secondColumn div {
        flex-grow: 1;
        background: blue;
        border: thin solid white;
      }
      
      @media screen and (orientation: portrait) {
        #firstColumn, #secondColumn {
          width: 100%;
          height: 50%;
        }
      }
    </style>
  </head>
  
  <body>
    <div id="firstColumn">
      <header>
        <h1>HEADER</h1>
      </header>
      <div id="main">
        <h1>CORPS DE TEXTE</h1>
      </div>
      <footer>
        <h1>FOOTER</h1>
      </footer>
    </div>
    <div id="secondColumn">
      <div>Premier cadre</div>
      <div>Deuxième cadre</div>
      <div>Troisième cadre</div>
      <div>Quatrième cadre</div>
    </div>
  </body>
  
</html>

Modifié par taspeur (05 Dec 2017 - 17:31)
Meilleure solution
Salut taspeur,

Ta solution fonctionne du tonnerre mais le comportement des navigateurs (testé sur Chrome et FF) se met à déconner (du moins à ne pas fonctionner comme je m'y attends) dès lors qu'on introduit des marges horizontales dans les éléments (y compris les sous-éléments des <div> de la structure).
Du coup, j'ai réussi à m'en sortir en ajoutant des <div> de séparation pour espacer mes containers.
Mais en tout cas, un grand merci, tu m'as tiré une sacré épine du pied...
Tant mieux si ça te convient !

Je comprends pas trop ce que tu as rajouté, tu pourrais me montrer ?
Comme je débute en flexbox également, c'est toujours sympa de connaitre les bugs et astuces Smiley smile
Je cherche à isoler le moment où ça se met à déconner entre le modèle simplifié discuté ici et l'utilisation réelle que j'en ai faite... Je ne t'oublie pas !
Sujet clos
Aller à