28173 sujets

CSS et mise en forme, CSS3

Height 100% de div

Bonjour,

j'ai bien trouvé la solution sur alsacreation pour mettre un div en height 100% cependant, j'aimerais fixer au dessus de ce div une partie fixe (un menu)

Le fait de faire ceci me fou des barres de scroll car le 100% correspond à la hauteur du parent sans prise en compte des marges.

Voici le code du problème :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<style type="text/css">
		* {margin:0; padding:0}
		html,body { height: 100%; }
	
		#test {
			margin-top: 50px;
			height: 100%;
			background: black;
		}
	</style>
</head>

<body>
	<div id="test"></div>
</body>

</html>


Cliquez ici pour vor le rendu

En gros je voudrais la même chose sans barre de scroll !!


Qqun aurait la solution ?

Merci d'avance.
Mad.
Oui, j'ai bien compris le problème, mais je cherche un moyen de le résoudre... Smiley langue

Si tu préfères :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<style type="text/css">
		* {margin:0; padding:0}
		
		html { height: 100%; }
		body { height: 100%; padding-top: 50px; }
		
		#test {
			height: 100%;
			background: black;
		}
	</style>
</head>

<body>
	<div id="test"></div>
</body>

</html>


Je voudrais que le div test occupe 100% de la hauteur de l'écran sauf les N premiers pixels.

Merci.
mad a écrit :
Oui, j'ai bien compris le problème, mais je cherche un moyen de le résoudre...


Tu veux dire, comment faire pour que 2+1 soit égal à 2 ? Je crois qu'il va falloir retourner un peu sur les bancs de l'école Smiley cligne
Parce que 100% plus une valeur non nulle, ça ne fera jamais 100%, à ce qu'il me semble.

Mais il y a ça qui peut t'intéresser, ça peut peut-être s'adapter à ton cas (tout dépend de ce que tu veux faire exactement) :
http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html
Modifié par mpop (19 Mar 2006 - 15:26)
Merci pour le lien, il ne me semble pas que ca puisse m'aider.

Donc je vais plus décrire mon problème ca sera plus simple pour vous.

Donc en fait il s'agit d'une fenêtre popup redimensionnable.
En haut, il y a un menu, à gauche, une liste d'élément en overflow auto, et à droite le corps du popup.

Voir le rendu ici

Comme vous pouvez le voir, il y a une barre de scroll de page que je ne veux pas, et la barre de scroll de la liste en overflow sort de la fenêtre.

Avez-vous une astuce pour corriger ces problèmes ?

Code source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<style type="text/css">
		* {margin:0; padding:0}
		html,body { height: 100%; }
		
		#menu {
			positon: absolute;
			background: #C0C0C0;
		}
		
		#listing {
			height: 100%;
			background: #EEEEEE;
			overflow: auto;
			float: left;
			width: 200px;
		}
		
		#corps {
			margin-left: 200px;
			height: 100%;
			background: #EAF0FD;
		}
	</style>
</head>

<body>
	<div id="menu">Barre de menu - Barre de menu - Barre de menu</div>
	<div id="listing">
		Elements de la liste<br/>Elements de la liste<br/>
	</div>
	<div id="corps">
		Corps de la fenêtre
	</div>
</body>

</html>


Merci d'avance.
Mad
Modifié par mad (19 Mar 2006 - 15:52)
Bonjour.

Pour se débarasser de la barre de scroll de page, il n'y a pas 36 solutions ! Le contenu ne peut pas être plus grand que l'espace disponible, ce qui n'est pas tenable si la fenêtre doit être redimensionnable Smiley confus

Le code ci-dessous semble faire ce que tu recherches, pour autant que j'aie bien compris, en tous cas sous Firefox.

A prendre avec des pincettes, le comportement est certainement foireux lorsque le contenu est trop important par rapport à la taille de la fenêtre et/ou avec d'autres navigateurs ...

* {
    margin:0; 
    padding:0
    }
html {
    height: 100%; 
    overflow: hidden;
    }
body {
    height: 100%;
    overflow: hidden;
    }
#menu {
    positon: absolute;
    background: #C0C0C0;
    }
#listing {
    height: 100%;
    background: #EEEEEE;
    overflow: scroll;
    float: left;
    width: 200px;
    }	
#corps {
    margin-left: 200px;
    height: 100%;
    background: #EAF0FD;
    }
arf j'y ai cru,

merci pr la tentative, effectivement, avec un menu de qqes pixel ca marche, mais dès que je mets le menu a 50px par exemple,le problème est toujours la Smiley decu

Regarde : Voir le rendu ici
Ouais, mais évidemment, si on change les données du problème à tout bout de champs Smiley lol

Essaie ça :
* {
    margin:0; 
    padding:0
    }
html {
    height: 100%; 
    overflow: hidden;
    }
body {
    height: 100%;
    overflow: hidden;
    }
#menu {
    positon: absolute;
    background: #C0C0C0;
    height: 50px;
    }
#listing {
    background: #EEEEEE;
    position: absolute;
    margin-top: 50px;
    top: 0;
    bottom: 0;
    overflow: auto;
    width: 200px;
    }	
#corps {
    margin-left: 200px;
    height: 100%;
    background: #EAF0FD;
    }

Mêmes réserves qu'auparavant Smiley cligne
ouép, firefox only Smiley decu

g essayé de mettre le menu en absolute avec top:50px et bottom:0px

mais pareil, ca marche que sous firefox Smiley decu
mad a écrit :
ouép, firefox only Smiley decu

g essayé de mettre le menu en absolute avec top:50px et bottom:0px

mais pareil, ca marche que sous firefox Smiley decu


<ceci n'est pas un troll>Firefox only, ça m'étonnerait, mais en tous cas, pas sur IE Smiley lol </ceci n'est pas vraiment un troll>
Salut,

à mon avis tu n'y arrivera pas directement avec les css donc il faut intervenir un peu dans le code html avec des conteneurs de conteneurs.

Par exemple :

div#conteneur_corps {
height:100%;
}

div#corps {
margin-top:50px;
}
ouais mais vu que de toute façon height correspond a la hauteur totale du parent et non a la hauteur disponible dans le parent, faire des conteneurs de conteneur ne résoud rien Smiley sweatdrop
Oui mais là le parent c'est body non ?

Pour autant que j'ai compris ton affaire, tu veux que le contenu de #corps commence à 50px du haut dans un conteneur qui fasse 100% de la fenêtre et sans déclenchement du scroll vertical.
C'est pas ça qu'il fallait comprendre ???
oué enfin c pas tout, car vu que j'utilise l'overflow auto dans les div, il ne suffit pas de mettre overflow hidden sur body pour arranger le probleme.

En gros :
Il faut que le div occupe la hauteur de la fenêtre sauf les 50 premiers pixels. En CSS imaginaire ca ferait :

margin-top: 50px;
height: 100%  - 50px
heuu, oué sauf que la barre de scroll, elle doit pas commencer depuis le haut dla page, la ca fait comme tu dis "zarbi" lol
Sujet clos
Aller à