Bonjour à tous!
Ne m'en voulez pas mais je viens remettre sur le tapis ce vieux problème du height à 100%.
Mon but étant de faire une interface pour une zone d'administration, j'essaie donc de la faire ressembler le plus possible à une application client. En gros, je ne veux pas avoir de scrolling sur la page, mais uniquement dans les blocs, le tout étant fluide à l'agrandissement ou à la réduction de la fenêtre du navigateur.
Comme une image vaut mille mots, voiçi un exemple de layout fonctionnel que j'ai créé.
layout
J'ai testé ce truc sur FF, Safari, IE6, IE7 et Opera ( tout sur pc, pas encore sur mac) et cela fonctionne partout sauf sur Opera.
Seulement, impossible de construire quelque chose du genre qui puisse être validé : dès que je place le doctype, tout part en vrille.
J'ai aussi essayé de redimensionner les bloc en javascript ; certes ça fonctionne, mais les réactions diffèrent entre les navigateurs et un de mes buts importants reste de ne pas utiliser de js pour cette interface-là.
Pour finir, comme je ne sais pas vraiment quelle seraient les implications si l'on ne met pas de doctype, j'aimerais néanmoins essayer d'arriver à ce résultat de manière valide.
Donc, la question : est-il possible de mettre des blocs avec un height a 100% MAIS avec des marges qui ne repoussent pas le bloc vers le bas de la page?
Merci à tous.
Le code, au cas où :
Modifié par ami (02 Mar 2008 - 18:22)
Ne m'en voulez pas mais je viens remettre sur le tapis ce vieux problème du height à 100%.
Mon but étant de faire une interface pour une zone d'administration, j'essaie donc de la faire ressembler le plus possible à une application client. En gros, je ne veux pas avoir de scrolling sur la page, mais uniquement dans les blocs, le tout étant fluide à l'agrandissement ou à la réduction de la fenêtre du navigateur.
Comme une image vaut mille mots, voiçi un exemple de layout fonctionnel que j'ai créé.
layout
J'ai testé ce truc sur FF, Safari, IE6, IE7 et Opera ( tout sur pc, pas encore sur mac) et cela fonctionne partout sauf sur Opera.
Seulement, impossible de construire quelque chose du genre qui puisse être validé : dès que je place le doctype, tout part en vrille.
J'ai aussi essayé de redimensionner les bloc en javascript ; certes ça fonctionne, mais les réactions diffèrent entre les navigateurs et un de mes buts importants reste de ne pas utiliser de js pour cette interface-là.
Pour finir, comme je ne sais pas vraiment quelle seraient les implications si l'on ne met pas de doctype, j'aimerais néanmoins essayer d'arriver à ce résultat de manière valide.
Donc, la question : est-il possible de mettre des blocs avec un height a 100% MAIS avec des marges qui ne repoussent pas le bloc vers le bas de la page?
Merci à tous.
Le code, au cas où :
body{
overflow: hidden;
padding: 0 0 185px 0;
_padding: 0 0 135px 0; /* IE */
margin: 0px;
font-family: tahoma, sans-serif;
font-size: 0.7em;
background-color: #ddd;
}
#container{
border: solid 1px;
margin: 10px;
padding: 5px;
background-color: #fff;
}
#header{
position: relative;
height: 100px;
background-color: #ddd;
margin: 0 0 5px 0;
}
#header h1{
position: absolute;
margin: 0;
padding: 0;
bottom: 0;
left: 5px;
font-size: 180%;
font-family: arial, sans-serif;
color: #999;
}
#left{
float: left;
width: 200px;
border: solid 1px;
height: 100%;
overflow: auto;
padding: 10px 0 35px 10px;
margin-right: 5px;
_margin-right: 2px; /* IE */
position: relative;
}
#mid{
position: relative;
overflow: hidden;
height: 100%;
border: solid 1px;
padding: 10px 10px 35px 10px;
_padding: 10px 10px 35px 10px; /* IE */
}
#top{
margin: 0;
padding: 0 0 0 5px;
height: 20px;
background-color: #ddd;
color: #999;
font-size: 140%;
font-family: arial, sans-serif;
}
#dispLeft{
float: right;
height: 100%;
margin: 5px 0 0 5px;
padding: 0 0 0 10px;
border: solid 1px;
overflow: auto;
overflow-x: hidden;
position: relative;
}
#largeur{ /* POUR IE */
width: 200px;
_font-size: 0px; /* IE */
}
#dispRight{
margin: 5px 0 0 0;
overflow: hidden;
padding: 0 0 0 10px;
height: 100%;
position: relative;
border: solid 1px;
overflow: auto;
}
<body>
<div id="container">
<div id="header">
<h1>TEST INTERFACE QUIRKSMODE</h1>
</div>
<div id="left">
<?php echo str_repeat("un menu<br />",30); ?>
</div>
<div id="mid">
<h2 id="top">top</h2>
<div id="dispLeft">
<div id="largeur"></div> <!-- BLOC POUR COMPENSER UN CURIEUX PROBLEME DE RAFRAICHISSEMENT SUR IE-->
<?php echo str_repeat("des infos<br />",30); ?>
</div>
<div id="dispRight">
<?php echo str_repeat("du contenu<br />",25); ?>
</div>
</div>
</div>
</body>
Modifié par ami (02 Mar 2008 - 18:22)
