Comment gérer la hauteur d'une page en fonction de la résolution ?

**Kenshin86** · 04/05/2007, 21h49

Bonjour

Dans la réalisation d'un cadre global dans lequel on mettrait ses informations a l'intérieur , à propos du CSS , que faut t'il mettre pour qu'il s'adapte dynamiquement a la résolution de l'écran ?

Ex : pour la résolution classique 1024 x 768 , j'peu parametrer le "height" en fonction. Mais lorsque je passe a la résolution au dessus , j'ai un problème , à propos de la largeur du cadre , c correct mais la longueur devient plus courte

Si la largeur s'adapte correctement , il n'y a pas de raison que la longueur ne s'adapte pas ? si ?

Cordialement,

**Kenshin86** · 04/05/2007, 21h56

En fait, la hauteur du cadre est fixe en fonction du texte placé dans le bloc.

donc imaginez si on a que 2 lignes

**Korko Fain** · 05/05/2007, 11h40

Sous Firefox, tu as le min-height mais sous IE, cette fonction n'existe pas. Le Height sous IE reprend cette propriété.

Afin de gerer, cela, on fait cela (en prenant comme taille minimale 500px) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
tabalise {
    height: 500px;
}
 
body > tabalise {
    min-height: 500px;
    height: auto;
}

La premiere regle sera comprise de tous mais la deuxieme seulement des navigateurs un peu plus respectueux des standards. On concidère que ces derniers comprennent le min-height.

Et pour adapter à la taille de l'écran, il faut que tu définisse la taille des objets source en % :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html, body {
    height: 100%;
}

**Kenshin86** · 07/05/2007, 15h24

Dans le cadre de mon projet , les postes client utilisent IE 6.0

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
	<head>
 
		<meta http-equiv="Content-Style-Type" content="text/css" >
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
 
	<body> 
		<div id="cadretest" >		 
                <!--  APPEL DIV (CADRE GLOBAL NOIR)  -->
		test
		</div>
	</body>
</html>

fichier CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#cadretest
	{
		border-width: 5px; /* EPAISSEUR BORDURE - CADRE GLOBAL */
		border-style: double; /* STYLE BORDURE - CADRE GLOBAL */
		border-color:#000000; /* NOIR - BORDURE CADRE GLOBAL */
		background: #CCFF66; /* VERT CLAIR - INTERIEUR CADRE GLOBAL*/
 
 
 
	}
 
html,body {height:100%;}

Ca ne fonctionnes pas... Ca affiches un cadre fixe mais l'ascenseur apparaît comme si il y a quelque chose en bas

avec le width , ça fonctionnes très bien , c'est à dire que le cadre se crée automatiquement en largeur mais pas en longueur :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
html,body {
width : 100%;
width: auto
height : 100%
height: auto;}

Donc c'est normal ? il faut ensuite entrer des données afin d'adapter le cadre a la résolution ?

**blueice** · 07/05/2007, 17h49

Tu peux utiliser JavaScript pour détecter la résolution et PHP pour le dynamisme dans la feuille de style...

**Kenshin86** · 07/05/2007, 17h59

Oui je sais. Mais on va dire que je l'optimise pour une résolution 1024x768.

**blueice** · 07/05/2007, 18h02

Repart avec ca :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
* { margin:0; padding:0; }
html,body {height:100%;}

**Kenshin86** · 07/05/2007, 18h07

oui je suis d'accord , mais c'est pas ce que je voulais savoir...

Merci quand meme

**Kenshin86** · 10/05/2007, 14h55

En fait pour la largeur , ça se fait automatiquement , mais pour la longueur , il faut entrer du texte ?

Lorsqu'on fait : height & width : 100%

Comment gérer la hauteur d'une page en fonction de la résolution ?

Dimensionnement en CSS

Discussions similaires

Partager

Partager