28172 sujets

CSS et mise en forme, CSS3

Obtenir deux bloques statiques comme"Gmail hors ligne"

Salut à tous,
J'ai une difficulté dans un affichage en css.A la manière de "Gmail hors ligne",je voudrais obtenir une interface qui est divisée en deux block verticals qui prennent tous deux 100% de la hauteur de l'écran de l'utilisateur avec un scrollbar pour chaque block.J'ai essayé de donner des hauteurs en pixel mais je trouve mieux que ce soit en pourcentage pour le confort de chaque écran.Je galère dessus depuis une semaine.Pour mieux comprendre vos suggestion,voici un code simple html simple que je produit:

<div id="page">
        
       <div id="menuHorizontal">
       </div>
        
        <div id="conteneur">
              <div id="liste">
              </div>
              <div id="contenu">
              </div>
        </div>
   
      <div id="PiedsPage">  
      </div>

 </div>



Je voudrais que les conteneurs "liste" et "contenu" qui sont des frères,soient comme je vous l'ai expliqué plus haut:statiques avec des scroll bar à la manière de 'Gmail hors ligne".


Merci à tous,j'ai hate de lire vos suggestions et bonne fin d'année par anticipation.
Dans un conteneur en position:relative, tu peux positionner les deux blocs avec position:absolute et leur donner les dimensions souhaitées. Puis, tu leur ajoutes un overflow:auto pour les rendre scrollables.

Voilà une démo que j'ai faite, avec deux versions (boîtes côte-à-côte et boîtes l'une sur l'autre) :


<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>blocs scrollables</title>
	<style type="text/css">
html, body {
	margin: 0;
	height : 100%;
}
#page { /* La page est toujours pleine */
	position: relative;
	min-height: 100%; 
	height: 100%; /* Pour IE et Opera */
}

/* COUPER LA PAGE EN DEUX POUR CHAQUE DÉMO */
div[id|="box"] { /* Pour tous les conteneurs "box-" */
	position: absolute;
	height: 50%; width: 100%;
	outline: thin solid black;
}
#box-horizontal { top: 0; }
#box-vertical { top: 50%; }

/* DÉMO POUR BOÎTES CÔTÉ À CÔTE */
div[id|="horizontal"] { /* Pour tous les conteneurs "horizontal-" */
	position: absolute;
	width: 50%; height: 100%;
	overflow: auto;
}
#horizontal-a { left: 0; background-color: palegoldenrod; }
#horizontal-b { left: 50%; background-color: lightgreen; }

/* DÉMO POUR BOÎTES L'UNE SUR L'AUTRE */
div[id|="vertical"] { /* Pour tous les conteneurs "vertical-" */
	position: absolute;
	width: 100%; height: 50%;
	overflow: auto;
}
#vertical-a { top: 0; background-color: palegoldenrod; }
#vertical-b { top: 50%; background-color: lightgreen; }
	</style>
</head>
<body>
<div id="page">

	<div id="box-horizontal">
		<div id="horizontal-a">
			foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo
				<br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo
		</div>

		<div id="horizontal-b">
			bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar
				<br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar
		</div>
	</div> <!-- fin #horizontal -->

	<div id="box-vertical">
		<div id="vertical-a">
			foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo
		</div>

		<div id="vertical-b">
			bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar <br> bar
		</div>
	</div> <!-- fin #vertical -->

</div> <!-- fin #page -->

</body>
</html>

Modifié par Muchos (08 Dec 2012 - 15:48)
Sujet clos
Aller à