Mon objectif est de créer une mise en page de 200 % de la largeur et de la hauteur, avec quatre conteneurs de hauteur et de largeur égales (100 % chacun), sans javascript comme minimum (ou de préférence sans bidouillages).
Pour l'instant, j'utilise HTML5 et CSS display:table. Cela fonctionne bien dans Safari 4, Firefox 3.5 et Chrome 5. Je ne l'ai pas encore testé sur des versions plus anciennes.
Néanmoins, dans IE7 et IE8, cette mise en page échoue complètement. (J'utilise l'activation Javascript HTML5 script / cc.. /, donc il ne devrait pas s'agir de l'utilisation de nouvelles balises HTML5)
Voici ce que j'ai :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<title>IE issue with layout</title>
<style type="text/css" media="all">
/* styles */
@import url("reset.css");
/* Generall CSS */
.table
{
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
/* Specific CSS */
html, body
{
//overflow:hidden; I later intend to limit the viewport
}
section#body
{
position:absolute;
width:200%;
height:200%;
overflow:hidden;
}
section#body .row
{
width:200%;
height:50%;
overflow:hidden;
}
section#body .row .cell
{
width:50%;
overflow:hidden;
}
section#body .row .cell section
{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
section#body #stage0 section header
{
text-align:center;
height:20%;
display:block;
}
section#body #stage0 section footer
{
display:block;
height:80%;
}
</style>
</head>
<body>
<section id="body" class="table">
<section class="row">
<section id="stage0" class="cell">
<section>
<header>
<form>
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</header>
<footer>
<table id="scrollers">
</table>
</footer>
</section>
</section>
<section id="stage1" class="cell">
<section>
content
</section>
</section>
</section>
<section class="row">
<section id="stage2" class="cell">
<section>
content
</section>
</section>
<section id="stage3" class="cell">
<section>
content
</section>
</section>
</section>
</section>
</body>
</html>Vous pouvez le voir en direct ici : http://www.tombarrasso.com/ie-issue/
