<div style="float: left; position: fixed; height: 100vh;">Div flottant fixe et hauteur de 100% du viewport</div>

Question

Je suis en train d'essayer de créer une structure responsive de base pour un site web avec CSS. Jusqu'à présent, j'ai réussi à créer trois colonnes div, un menu, une barre latérale et une pour le contenu.

Ce que j'aimerais réaliser maintenant est d'avoir le menu et la barre latérale qui occupent 100% de la hauteur de la fenêtre d'affichage et fixes de sorte que la div de contenu soit "scrollable" mais que le menu et la barre latérale restent en haut quelle que soit la quantité de contenu dans la colonne col content. Naturellement, je ne veux pas que cela se produise dans la requête media.

Comment puis-je réaliser cela de manière la plus efficace avec CSS. Dois-je restructurer les divs en HTML ou y a-t-il un moyen de réaliser cela avec CSS?

/*  SECTIONS  */

.section {
  clear: both;
}
/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
}
/*  GRID OF THREE  */

.menu {
  width: 33%;
  background-color: #98D2ED
}
.sidebar {
  width: 33%;
  background-color: #D3ADAD
}
.content {
  width: 33%;
  background-color: #C9E4D1
}
/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .menu {
    width: 100%;
  }
  .sidebar {
    width: 100%;
  }
  .content {
    width: 100%;
  }
}

      Menu

    Je veux que cette colonne soit fixe et occupe toute la hauteur de la fenêtre d'affichage lorsque la taille de l'écran est supérieure à 480px.

      Barre latérale

    Je veux que cette colonne soit fixe et occupe toute la hauteur de la fenêtre d'affichage lorsque la taille de l'écran est supérieure à 480px.

    Contenu

Ce que j'essaie de réaliser:

Answer 1

Vous pouvez utiliser flexbox, que ce soit pour les éléments de largeur et de hauteur connus/inconnus. La clé est de définir la zone de contenu à overflow:auto et de basculer la flex-direction en column dans les requêtes media.

jsFiddle

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.content {
  flex: 1;
  overflow: auto;
}
.menu    { background: grey;   }
.sidebar { background: silver; }

@media (max-width: 480px) {
  body {
    flex-direction: column;
  }
}

Menu
Sidebar

  Contenu

Ou, la façon traditionnelle de positionner le menu et la barre latérale avec position:fixed.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
body {
  margin-left: 200px;
}
.menu, .sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  overflow: auto;
}
.menu {
  left: 0;
  width: 100px;
  background: grey;
}
.sidebar {
  left: 100px;
  width: 100px;
  background: silver;
}
.content {
  overflow: auto;
}
@media (max-width: 480px) {
  body {
    margin: 100px 0 0;
    overflow: hidden;
  }
  .menu, .sidebar {
    left: 0;
    width: 100%;
    height: 50px;
  }
  .sidebar {
    top: 50px;
  }
  .content {
    height: calc(100% - 100px);
  }
}

Menu
Sidebar

  Contenu

Answer 2

Tel que je le comprends, vous voulez que votre .menu et votre .sidebar soient fixés à l'écran à un endroit et que le contenu soit défilable. Et ajoutez un peu plus de code à d'autres choses également, je sais que cela semble vague, mais ce serait une perte de temps d'écrire tout, car j'ai édité votre copie et j'ai des notes qui expliquent tous mes changements (et les raisons de le faire) dans le code ci-dessous.

J'ai retiré les float et leurs class, car je crois qu'ils ne sont pas nécessaires, et que les float font plus de mal que de bien. J'ai également déplacé le .content pour qu'il soit dans la colonne du milieu (entre le .menu et le .sidebar). Cependant, si vous avez besoin de le faire, n'hésitez pas à revenir sur l'un ou l'autre de ces éléments.

---

Voici le code mis à jour : (et voici un JSFiddle : JSFiddle)

Je sais que le .menu a un espace bizarre au-dessus (lors de l'exécution des extraits de code et du JSFiddle), mais je l'ai en direct sur mon site web ici, et il se comporte parfaitement bien, et utilise le même code.

* {
    margin: 0px; /* Ajouté pour supprimer la marge de tout */
    padding: 0px; /* Ajouté pour supprimer la marge de tout */
}

.section, .menu, .sidebar, .content {
    display:inline-block !important; /* Ajouté pour qu'ils s'alignent côte à côte */
}

.section {width:100%;} /* Assez explicite, ajouté pour définir ".section" avec une largeur de 100% */

/*  GRILLE DE TROIS  */
.menu {
    width: 33%; /* Était déjà là */
    background-color: #98D2ED; /* Était déjà là */

    height:100vh; /* Le rend 100% de la hauteur de la vue, ou 100% de la hauteur de la fenêtre du navigateur */

    position: fixed; /* Le fait rester "fixe" à un endroit sur l'écran */
}

.sidebar {
    width: 33%; /* Était déjà là */
    background-color: #D3ADAD; /* Était déjà là */
    position:absolute; top:0px; left: 67%; /* Pour placer l'élément au bon endroit, ajoutez la largeur de "menu" et "content" */

    height:100vh; /* Le rend 100% de la hauteur de la vue, ou 100% de la hauteur de la fenêtre du navigateur */

    position: fixed; /* Le fait rester "fixe" à un endroit sur l'écran */
}
.content {
    width: 34%; /* Était déjà là, mais changé à 34 pour remplir la page du site */
    background-color: #C9E4D1; /* Était déjà là */

    position:absolute; top:0px; left:33%; /* Pour placer l'élément au bon endroit, faites de cette largeur celle de "menu" */
}

/* Le CSS ci-dessous était déjà là */

/*  PASSE EN PLEIN LARGEUR EN-DESSOUS DE 480 PIXELS */
@media only screen and (max-width: 480px) {
  .menu { width: 100%; }
  .sidebar { width: 100%; }
  .content { width: 100%; }
}

        Menu

        Content

        Sidebar

J'espère vraiment que cela vous a aidé !