3
votes

faire une div pleine hauteur en html et css

Je veux faire des divs comme la première photo: mais quand j'utilise 100% pour la hauteur des divs jaunes et bleus ils sont sortis de l'écran comme la deuxième photo: que dois-je faire?

html css

4 commentaires

Pouvez-vous publier votre css / html? Il semble que vous utilisiez un rembourrage ou une marge pour tout pousser vers le bas de 60 pixels. En faisant cela, la hauteur restante de l'écran que vous devez remplir n'est plus de 100%.

Lorsque vous utilisez des valeurs de pourcentage, vous devez vous assurer que le div d'emballage n'a pas de valeurs de pourcentage pour qu'il fonctionne. Veuillez également inclure votre code HTML et CSS.

réponse courte: vous pouvez toujours utiliser la fonction css calc, comme l'en-tête que vous pouvez utiliser (width: calc (100% -60px); et ainsi

Et 1 autre chose, vous pouvez utiliser la position fixée pour l'en-tête supérieur et le rendre pleine largeur avec un rembourrage sur les côtés pour placer le logo dans un nouveau calque avec un z-index plus élevé;)

3 Réponses :

4
votes

Définissez le parent flex ( body dans ce cas) sur min-height: 100vh et définissez sa direction sur colonne pour que les enfants s'empilent
Définissez le corps de la page ( main ) sur flex-grow: 1 pour qu'elle occupe tout l'espace disponible, mais pas plus que ce qui est disponible
Créez quelques flexbox es imbriquées en utilisant la direction par défaut de row
Poussez le contenu imbriqué vers la droite en utilisant justify-content: flex-end;

<header>
  <div class="logo"></div>
</header>
<main>
  <aside class="menu-box"></aside>
</main>

body, html { margin: 0 }

body, header, main {
  display: flex;
}

header, main {
  justify-content: flex-end;
}

.logo, .menu-box {
  flex-basis: 60px;
}

body {
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  background-color: #ccc;  
}

.logo {
  height: 60px;
  background-color: lightgreen;  
}

.menu-box {
  background-color: green;
}

jsFiddle

0 commentaires

1
votes

Si vous vouliez simplement résoudre le problème majeur, vous pouvez utiliser vh combiné avec calc.

.header {
   height: 60px;
}

.content {
  height: calc(100vh -60px);
}

cela remplirait la hauteur de la page moins 60px.

Voici un exemple; https://jsfiddle.net/0ndbw3to/

2 commentaires

Que faire si .header dépasse la hauteur de 60px ? Et qu'en est-il de la boîte de logo et de la boîte de menu ?

ouais totalement @AndyHoffman si c'était le cas, il faudrait le mettre à jour.

0
votes

Une solution simple utilisant Mise en page CSS Grid (pour la prise en charge actuelle, voir ici ) :

Définissez la hauteur de la mise en page sur 100vh.
grid-template-columns: 1fr 60px : définit les colonnes - le logo et la boîte de menu à 60px et le en-tête et contenu occupent l'espace restant horizontalement.
grid-template-rows: 60px 1fr : définissez les lignes - le header et le logo à 60px et le contenu et la boîte de menu prennent l ' espace restant verticalement.

Voir la démo ci-dessous:

<div class="wrapper">
  <div class="header"></div>
  <div class="logo"></div>
  <div class="content"></div>
  <div class="aside"></div>
</div>

body {
  margin: 0; /* remove the default browser margin */
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 60px; /* set the columns */
  grid-template-rows: 60px 1fr; /* set the rows */
  height: 100vh; /* set the height of the layout */
}

/* presentation styles */
.wrapper>*{border:1px solid}.header{background:#00f}.logo{background:orange}.content{background:#f0f8ff}.aside{background:grey}

0 commentaires