28112 sujets

CSS et mise en forme, CSS3

Bloc prenant la hauteur totale de son parent

Bonsoir,
Ce sujet a souvent été abordé... Je l'utilise , avec succès, pour fixer le footer au pied de la page ou au pied du viewport selon la longueur du contenu.
Là j'ai voulu modifier un peu rajoutant un container global

<body  class="page mode-static" id="top">
	<div class="container">
		<div class="wrapper">
			<header class="SiteHeader">
			</header>
			<main class="SiteContent">
			</main>
		</div>
		<footer class="SiteFooter">
		</footer>
	</div>
</body>

Le container prend bien la hauteur totale du viewport mais le wrapper ne ne fait pas alors que son parent (container) a bien une hauteur définie (100%).
J'ai essayé aussi avec min-height: calc ( 100% - 5rem ) (5 rem étant la hauteur du footer en-dehors du wrapper.

html, 
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
	min-height :100%;
	margin: 0 1rem;
	border: solid 1px sienna;
}
.wrapper {
	min-height :100%;
	margin: 1rem;
	border: solid 1px blue;
}
.SiteHeader {
	height :8rem;
	margin: 1rem;
	border: solid 1px orange;
}
.SiteContent {
	min-height :10rem;
	margin: 1rem;
	border: solid 1px orange;
}
.SiteFooter {
	height :5rem;
	margin: 0 1rem ;
	border: solid 1px orange;
	background-color: lightgray;
}

Cordialement
Et oui sujet souvent débattu Smiley smile
utilise flex, flex-direction et 100vh
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>sans titre</title>
	<meta charset="utf-8" />
	<style>
		* { margin: 0 0.3rem; padding: 0 1rem; }
		body { margin:0; padding: 0; color: #fff; font-family: Sans-Serif; font-size: 150%; }
		.container { height: 100vh; display: flex; flex-direction: column; }
		.wrapper { flex-grow: 1; }

		html {background: #444; }
		.container { background: wheat; }
		.wrapper { background: burlywood; }
		.header { background: firebrick; }
		.content { background : green; }
		.footer { background: #888; }
	</style>
</head><body>
	<div class="container">
		<div class="wrapper">
			<header class="header">
				Sur ta tête
			</header>
			<main class="content">
				Parler pour ne rien dire
			</main>
		</div>
		<footer class="footer">
			c'est le pied
		</footer>
	</div>
</body></html>

Pas de majuscules dans les class, stp.
Modifié par bazooka07 (22 May 2018 - 01:10)
Bonjour,
Avec cette solution, cela fonctionne bien pour le wrapper.
Par contre le container, lorsque le content est plus grand que le viewport, ne suit pas sauf si on met min-height; 100vh.
Mais je pensais qu'on pouvait trouver une solution sans passer par flex.

Pour le second sujet on pourrait lancer un fil de discussion dédié tellement il risque de provoquer de solutions perso.
Auparavant je n'utilisais que des minuscules et des traits d'union.. Esthetiquement c'est ce que je préfère bien que le CamelCase j'aime bien aussi.
Toute la mise en forme et le layout je le fais dans la feuille de styles et non directement dans le html avec une surcharge de classes .
Je me suis inspiré des conventions BEM, mais en me refusant d'utiliser les underscores.

BlockName-elementName--modifierName
namespace-ComponentName-descendantName--modifierName
namespace-ComponentName-descendantName is-state-of-component
ainsi que quelques classes utilitaires en minuscules

Ce qui permet aussi d'utiliser ce genre de classes:
[class|="b"],
.block {
ou
[class|="w"],
[class$="-wrapper"],
.wrapper{
Modifié par cpalo (22 May 2018 - 09:34)
Voilà j'ai trouvé la solution sans passer par flex.
Il suffit de mettre container en position relative et le footer en position absolue.

.container {
    position: relative;
    min-height :100%;
    margin: 0 1rem;
    border: solid 1px sienna;
}
.wrapper {
    margin-bottom: 0;
    padding-bottom: 4rem;
    border: solid 1px blue;
}
.SiteFooter {
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;	
    margin: -4rem 1rem 0 1rem ;
    height: 4rem;
}

Modifié par cpalo (22 May 2018 - 10:51)
  <style>
		* { margin: 0 0.3rem; padding: 0 1rem; }
		body { margin:0 auto; padding: 0; color: #fff; font-family: Sans-Serif; max-width: 64rem; }
		.container { height: 100vh; display: flex; flex-direction: column; }
		.header { height: 2rem; padding-top: 0.3rem; }
		.wrapper { flex-grow: 1; }
		.content { max-height: calc(100vh - 2rem - 1.8rem); overflow-y: auto; font-size: 100%; }
		.content p { margin: 1rem 0; padding: 0; text-indent: 1.5rem; text-align: justify; }
		.footer { height: 1.8rem; }

		html {background: #444; }
		.container { background: wheat; }
		.wrapper { background: burlywood; }
		.header { background: firebrick; }
		.content { background : lightyellow; color: brown; }
		.footer { background: #888; }
	</style>

Voir démo online :
https://kazimentou.fr/divers/test2.html

Sauf que dans ta solution, tu sors des blocs du flux. Cela peut être une source de tracasseries.
Flex est très bien supporté par les navigateurs :
https://www.caniuse.com/#search=flex
Modérateur
Si tu ne veut pas de flex , que calc() te convient et que tu veut utilisé les %, alors box-sizing sera utile. Tu peut commencer par déplacer quelques margin en padding pour les integré dans les calculs de dimensions.

Cependant , min-heigh exprimé en % requiers un height valide sur le parent pour qu'il puisse être calculé.

exemple basé sur ta feuille de style initiale :
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  padding: 1rem;/*!!*/
}
.container {
  height: 100%;/*!!*/
  margin: 0;
  border: solid 1px sienna;
  padding: 1rem;/*!!*/
}
.wrapper {
  min-height: calc(100% - 6rem);/*!!*/
  border: solid 1px blue;
}
.SiteHeader {
  height: 8rem;
  margin: 1rem;
  border: solid 1px orange;
}
.SiteContent {
  min-height: 10rem;
  margin: 1rem;
  border: solid 1px orange;
}
.SiteFooter {
  height: 5rem;
  margin: 1rem 0;
  border: solid 1px orange;
  background-color: lightgray;
}


rappel de la structure :
<div class="container">
		<div class="wrapper">
			<header class="SiteHeader">
			</header>
			<main class="SiteContent">
			</main>
		</div>
		<footer class="SiteFooter">
		</footer>
	</div>


Flex est aujourd'hui ce qui est de plus simple et efficace
Bonjour,

J'avais essayé flex il ya quelques mois.. et comme j'avais réussi à faire mon mini-framework avec des float.. j'avais laissé tombé...
Mais je vais revoir cela de plus près car sans doute plus facile pour un layout avec une sidebar fixed.
Dans le code que tu viens de me donner lorsque le contenu augmente, le container ne suit pas.
Modérateur
Bonjour, oui, c'est effectivement le défaut avec une hauteur fixe necessaire a un moment donné pour etre utilisable par min-height.

Flex s'en affranchit avec flex-grow :

exemple possible en flex. (Il s'agit ici d'imbriqué les boites flexible)
html,body,.container, .wrapper {
  display:flex;
  flex-direction:column;
  flex:1;/* prend toute la place disponible , pas de height necessaire pour .container et .wrapper, flex se charge du calcul */
}
/* base de dimension pour html et body afin de fonctionné dans IE */
html {
  height:100%;
}
body {
min-height:100%;/* compris par IE si html est aussi en flex colonne  */
}



.container {
  border: solid 1px sienna;
}
.wrapper {
  border: solid 1px blue;
  margin:1em;
}
.SiteHeader {
  height: 8rem;
  margin: 1rem;
  border: solid 1px orange;
}
.SiteContent {
  min-height: 10rem;
  margin: 1rem;
  border: solid 1px orange;
}
.SiteFooter {
  height: 5rem;
  margin: 1rem ;
  border: solid 1px orange;
  background-color: lightgray;
}

voici un codepen pour jouer avec Smiley cligne https://codepen.io/gc-nomade/pen/VxNQVg
Modifié par gcyrillus (23 May 2018 - 10:40)
Bonsoir,
Du coup j'en ai profité pour me poser.. et en avancer en me documentant à nouveau sur FlexBox, puis sur Grid-Layout.
Et là la découverte... Grid-Layout correspond plus à ce que je faisais avec mes layouts comportant des blockgroups , emplacements pour les blocks contenant les composants.
Et je ne raisonnais pas en grille mais en nombre de blocks par ligne.....
Alors les grid-template-areas ça me parle bien.. à suivre.
Pour la remarque par rapport au box-sizing, j'ai donné ici un code inline simplifié ; mais effectivement dans la réalité j'ai une feuille de style séparée dans laquelle j'ai un reset avec ce box-sizing, et le html à 100% .
Merci de votre aide , et de m'avoir lancé à revoir mon "mini-framework perso"..
Cordialement
Sujet clos
Aller à