1478 sujets

Web Mobile et responsive web design

[Résolu] Afficher sur toute les tablettes quelle que soit la hauteur

Est-ce que ce code va afficher la page sur toutes les tablettes quelle que soit leur hauteur ?
Jusqu'à maintenant, c'était parfait sur android 10'.1 mais sur ipad 2 , le footer n'était pas visible.


     <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>




#header {
  position:fixed;
  top:0;
  height:5%;
  width:100%;
  left:0;
  background-color:blue;
}
#content {
  position:fixed;
  top:5%;
  height:85%;
  width:100%;
  left:0;
  background-color:green;
}
#footer {
  position:fixed;
  bottom:0;
  height:10%;
  width:100%;
  left:0;
  background-color:red;
}


fiddle
https://jsfiddle.net/fredericmarcel/4ve19x4n/11/
Merci de votre aide.
Frédéric Smiley smile
Bonjour,

Le problème de ce code c'est que la hauteur des éléments dépendent de la hauteur de l'écran : header et footer se retrouveront très étriqués selon la taille de la fenêtre.

De plus les éléments sont positionnés en fixed : que ce passera-il si le contenu de la div principale dépasse les capacités de cette dernière sur les écran trop petits ? Réponse : un design explosé.

Voici ma solution, en flexbox : CodePen

<html>
  <body>
    <div class="wrapper">
      <main class="main">.main</main>
    </div>
    <nav class="nav">.nav</nav>
    <footer class="footer">.footer</footer>
  </body>
</html>


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  line-height: 100%;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.5rem;
  color: #333;
}
.nav {
  order: -1;
  padding: 1rem;
  background: Peru;
}
.footer {
  padding: 1rem;
  background: Chocolate;
}
.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.main {
  padding: 1rem;
  background: Tan;
}
@media (max-width: 30rem) {
  .main {
    flex: 1 0 auto;
  }
}
@media (min-width: 30rem) {
  .nav {
    display: block;
  }
  .wrapper {
    flex-direction: row;
  }
  .main {
    flex: 1 1 auto;
  }
}

Modifié par Olivier C (06 Sep 2016 - 06:57)
Sujet clos
Aller à