28111 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page basique grid-layout

Bonjour,

Je ne vois pas d'où cela peut venir alors que lorsqu'il y a qu'une colonne le footer reste bien en bas.
upload/1528199767-831-capture01.jpg 



<body  class="page mode-static" id="top">
	<div class="container">
		<header class="bg-Banner">
			<h2>Banner</h2>
		</header>
		<nav class="bg-PrimaryNav">
			<h2>Navigation</h2>
		</nav>
		<div class="w-SiteContent">
			<h1>PageTitle</h1>
		</div>
		<footer class="bg-SiteFooter">
			<h2>SiteFooter</h2>
		</footer>
	</div><!-- /.container -->



html{
	box-sizing: border-box;
}
*,
::before,
::after {
	box-sizing: inherit; 
}
html {
	font-size: 100%; 
}
html,
body {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.container {
	min-height: 100%;
	display: grid;
	/*grid-gap: 2% 0;*/
	grid-template-areas:
		"header"
		"nav"
		"content"
		"footer";
	grid-template-columns: 1fr;	
	grid-template-rows:
		auto 	/* header */
		auto	/* nav */
		1fr		/* content */
		auto;	/* footer */
	/* grid-row-gap: 1px;
	grid-column-gap: 1px; */
}
@media screen and (min-width: 1000px) {
	.container {
		grid-template-areas: 
			"header header header"
			"nav nav nav"
			". content ."
			"footer footer footer";
		grid-template-columns:
			5% 1fr 5%; 
	}
}


Cordialement
Merci d'avance de me dire où je me plante
Modifié par cpalo (05 Jun 2018 - 13:56)
Même résultat

J'ai refait plus simple avec

body {
	min-height: 100%;
	display: grid;
	/*grid-gap: 2% 0;*/
	grid-template-areas:
		"header"
		"nav"
		"content"
		"footer";
	grid-template-columns: 1fr;	
	grid-template-rows:
		auto 	/* header */
		auto	/* nav */
		1fr		/* content */
		auto;	/* footer */
	/* grid-row-gap: 1px;
	grid-column-gap: 1px; */
}
@media screen and (min-width: 1000px) {
	body {
		grid-template-areas:
			"header header"
			"nav nav"
			"content content"
			"footer footer";
		grid-template-columns: 1fr 1fr;	
	}
}

Et même résultat
upload/1528210130-831-capture03.jpg
Bien d'accord avec toi, et c'est ce que je suis en train de faire..
Mais dans mon cas tu n'aurais pas une idée d'où pourrait venir ce bug?
Bonsoir,
en association avec « grid-template-areas », il faut utiliser « grid-area ».
Sinon, comment savoir qui va où…
Smiley smile
Oups!
Toutes mes excuses, j'avais oublié de coller cette partie

.bg-Banner 		{ grid-area: header; }
.bg-PrimaryNav  { grid-aera: nav; }
.w-SiteContent  { grid-area: content; }
.bg-SiteFooter  { grid-aera: footer; }
Bonjour,

je ne l'ai pas vu tout de suite non plus, il a fallu que je teste…
Mais pour le nav et le footer, vous avez écrit « grid-aera » et non « grid-area ».

Smiley smile
Meilleure solution
Bonjour,

Merci... effectivement c'était bien la cause
Ah ces erreurs d'écriture

Cordialement
Sujet clos
Aller à