Mise en forme tabulaire en css dans un design

Bonjours à tous,

J'utilise le modèle tabulaire en CSS pour structurer mon site. Je voulais fixer mon entête, j'ai donc utilisé position:fixed.

Ma question est la suivante.

Est'il judicieux et valide d'utiliser display:table-row et position:fixed ?
Et plus généralement est'il judicieux de structurer un site avec display:table ?

Voici une version light de la structure :

Le CSS :

html,body{
	height:100%;
}
body{
	min-height:100%;
	margin:0;
}
div#wrapper{
	display:table;
	height:100%;
	width:100%;
	padding-top:50px;/* a cause du header en position fixé */
}
header#header{
	display:table-row;
	
	position:fixed;
	top:0;
	height:50px;
	width:100%;
}
main#container{
	display:table-row;
	
	height:100%;	
}
footer#footer{
	display:table-row;
	min-height:50px;
}

Le HTML :

<div id="wrapper">
	<header id="header">Header Fixed</header>
    <main id="container">Container</main>
    <footer id="footer">Footer</footer>
</div>

Merci d'avance de votre aide
Modifié par semantic (11 Jul 2014 - 19:02)

semantic a écrit :
Bonjours à tous,

J'utilise le modèle tabulaire en CSS pour structurer mon site. Je voulais fixer mon entête, j'ai donc utilisé position:fixed.

Ma question est la suivante.

Est'il judicieux et valide d'utiliser display:table-row et position:fixed ?

Position:fixed;(ou absolute ou float) rend obsolete la regle display en sortant du flux cet élément.

semantic a écrit :

Et plus généralement est'il judicieux de structurer un site avec display:table ?

Pourquoi pas, tout dépend du résultat et comportement final de la page attendu.
Il n'y a pas vraiment de contre indication.

Merci pour la réponse.
Le comportement n'est pas mauvais d'après mes tests, cela permet d'avoir un footer qui prend la taille du contenu et d'avoir des menus qui prennent la totalité de la hauteur (sans utiliser la technique des fausses colonnes).

Donc en fait si je comprends bien je dois sortir le header de "mon tableau css" et faire ainsi :

html,body{
	height:100%;
}
body{
	min-height:100%;
	margin:0;
}
/* Je supprime le display:table-row */
header#header{
	position:fixed;
	top:0;
	height:50px;
	width:100%;
}
div#wrapper{
	display:table;
	height:100%;
	width:100%;
	[b]padding-top:50px;[/b]/* a cause du header en position fixé */
}
main#container{
	display:table-row;
	
	height:100%;	
}
footer#footer{
	display:table-row;
	min-height:50px;
}

Le HTML :

<header id="header">Header Fixed</header>
<div id="wrapper">
    <main id="container">Container</main>
    <footer id="footer">Footer</footer>
</div>

Encore merci
Modifié par semantic (11 Jul 2014 - 21:16)