28220 sujets

CSS et mise en forme, CSS3

Menu en height 100%

Bonjour,

L'utilisation des height en 100% (et même des width) me pose de beaux soucis...

En effet, vous verrez avec mon code de test ci-dessous qu'avec une height (pour #menuLeft) ou une width (pour #content) de 100%, les zones dépassent, ce qui génèrent des scrollbar...

Pour info, j'ai besoin de garder mes position absolute...
Les border ne sont là que pour bien voir ce qu'il se passe...

Voici mon code :

<html>

<head>
	<style>
		#header {
			position: absolute;
			top: 5px;
			left: 0px;
			width: 100%;
			height: 70px;
			border: 1px solid #FF0000;
		}

		#menuLeft {
			position: absolute;
			top: 80px;
			left: 0px;
			width: 150px;
			height: 100%;
			border: 1px solid #00FF00;
		}

		#content {
			position: absolute;
			top: 80px;
			left: 155px;
			width: 100%;
			height: auto;
			border: 1px solid #0000FF;
		}
	</style>
</head>

<body>

<div id="header">
	Header de ma page
</div>

<div id="menuLeft">
	<div>Menu 1</div>
	<div>Menu 2</div>
	<div>Menu 3</div>
</div>

<div id="content">
	Contenu de ma page !
</div>

</body>
</html>


Merci pour votre aide Smiley smile
Bonjour,

La structure d'une page HTML, contrairement à une croyance bien ancrée, n'est pas restituée sur un écran (une fenêtre de navigateur aux dimensions déterminée. Elle est restituée sur un canevas aux dimensions infinies, sur lequel la fenêtre du navigateur ne fait que promener une zone de visualisation. En d'autres termes, le scroll sur un contenu qui ne "tient pas" dans la zone d'affichage est inhérent aux navigateurs graphiques.

Dans le cas des rendus sur les medias paginés (projection, print), apparemment dimensionnés, un processus supplémentaire est nécessaire pour découper la structure HTML en portions restituables successivement dans des boîtes de tailles prédéfinies (la feuille papier pour le print, la zone d'affichage pour projection). Ce n'est rien d'autre qu'une variante du scroll, plus brutale.

En aucun cas, une page Web n'est faite pour être enfermée à la fois en largeur et en hauteur (height=100%). On pourrait dire que le Web n'est ni le WAP ni le minitel, et que c'est ce qui fait justement toute sa force.

Il ne faut pas faire du height=100% pour enlever le scroll.
Modifié par Laurent Denis (02 Jan 2006 - 11:53)
Merci, en effet je n'avais pas regardé la FAQ mais maintenant que c'est fait, mon problème est toujours le même...

Voici mon nouveau code :

<html>

<head>
	<style>
		body, html {
			width: 100%;
			height: 100%;
		}

		#container {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			border: 1px solid #FF8000;
		}

		#header {
			position: absolute;
			top: 5px;
			left: 0px;
			width: 100%;
			height: 70px;
			border: 1px solid #FF0000;
		}

		#menuLeft {
			position: absolute;
			top: 80px;
			left: 0px;
			width: 150px;
			height: 100%;
			border: 1px solid #00FF00;
		}
	</style>
</head>

<body>

<div id="container">

	<div id="header">
		Header de ma page
	</div>

	<div id="menuLeft">
		<div>Menu 1</div>
		<div>Menu 2</div>
		<div>Menu 3</div>
	</div>

</div>

</body>

</html>


Sinon, concernant le dernier message, désolé mais je n'ai pas tout compris...
Si tu as une solution, je suis preneur Smiley smile

Merci encore !
Le dernier message signifie que, concrètement, ce type de mise en page va toujours se casser la figure quelque-part Smiley cligne

Sinon, ton scroll est du au height: 100% du menu, qui signifie 100% de la fenêtre d'affichage. Donc un scroll de la hauteur du header. Et il n'est pas possible de dire: 100% moins xx pixels.
ok, c'est bien ce que j'avais constaté Smiley cligne ...

du coup, que me conseilles tu pour créer un menu qui prend toute la hauteur de ma page (moins le header) ?
et qui se redimensionne automatiquement dès que la fenêtre est redimensionnée ?

parce que c'est qqchose qui est parfaitement faisable avec des <table> et tout le reste... mais purement en CSS... pfff... galère pour l'instant !
Modifié par aurapp (02 Jan 2006 - 12:31)
Bonjour,

Je relance ma question parce que c'est important et urgent pour moi :

quelqu'un saurait-il comment faire pour que mon #menuLeft fasse toute la hauteur de la page sans déborder inutilement en bas ?
(voir le dernier code que j'ai posté ci-dessus)

Merci d'avance encore... Smiley smile
salut et bonne année 2006 Smiley smile

Avec les css il est toujours utile de varier les perspectives.

Pour ton menuleft

left:0;
top:0;
border-top:0;
border-bottom:0;
/* ben oui parce que 100% + 2px, ben ça fait 100% + 2px  [cligne] */


Tu identifies le conteneur de ton premier menu : #menu1.

Et

#menu1 {
margin-top:80px;
}

Enfin tu augmente le z-index du header par


z-index:100;

Modifié par clb56 (02 Jan 2006 - 17:07)
Sujet clos
Aller à