18041 sujets

Questions générales et questions de débutants

Height en pourcentage

Bonjour,

je reviens vers vous pour un soucis de hauteur.
Je veux simplement appliquer une hauteur a un aside, cela fonctionne trés bien pixel, mais pas en pourcent.
J'ai bien vérifier que mon contenant avais lui meme une hauteur, et mon aside a du contenu.

J'ai du mal a comprendre ...

Je vous laisse mon code html :


		<aside>
			<img src="Images/soon.png" alt="Soon" />
			<h3>Frozen</h3>
			<video controls poster="Images/video.png" src="http://www.dailymotion.com/video/x157pa9_frozen-la-reine-des-neiges-full-uk-trailer-vo-hd1080p_shortfilms"></video>
			<h4>Synopsis</h4>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
		</aside>


et voici le code css : 

body {
	background-color: #d6d6d6;
	font-family: 'aller';
	height: 100%;
}

#wrapper{
	width: 65%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}

#wrapper > aside{
	float: right;
	width:	25.24271844660194%;			/* 260px / 1030px*/
	height: 37%;
	margin-top: 4.18994413407821%;		/* 45px / 1074px */
	margin-right: 0.97087378640777%;
	background-color: white;
	-o-border-radius: 5.76923076923077%/3.8659793814433%;			/* 15px / 260px ; 15px / 388px*/ 
	-webkit-border-radius: 5.76923076923077%/3.8659793814433%;
	-moz-border-radius: 5.76923076923077%/3.8659793814433%;
	border-radius: 5.76923076923077%/3.8659793814433%;
	-moz-box-shadow: 5px 5px 10px 0px #b7b7b7;
	-webkit-box-shadow: 5px 5px 10px 0px #b7b7b7;
	-o-box-shadow: 5px 5px 10px 0px #b7b7b7;
	box-shadow: 5px 5px 10px 0px #b7b7b7;
	overflow: hidden;
}


Merci d'avance pour votre aide.
Modifié par mace (11 Feb 2014 - 11:21)
salut,
déjà je ne crois pas que ça soit utile de mettre autant de nombres après la virgule ^^ la précision n'ira pas jusque là.
Est-ce que le <aside> est enfant direct de "#wrapper" et est-ce que "#wrapper" est enfant direct du body ?
Je pense également que la précision ne va pas jusque la, mais ne voulant pas m'embeter, je fait un simple copier coller de la calculatrice.

Mon aside est bien enfant du wrapper qui est lui meme bien enfant du body.

Je ne comprend vraiment pas le problème.
Ils sont bien enfants direct, voici le code html:


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Disney Fan</title>
	<link rel="stylesheet" href="css/init.css">
	<link rel="stylesheet" href="css/typo.css">
	<link rel="stylesheet" href="css/layout.css">
</head>
[b]<body>[/b]
	[b]<div id="wrapper">[/b]
		<header>
			<h1><a href="#">Disney Fan</a></h1>
			<section>
				<form>
					<label>username</label>
					<label>password</label>
					<input type="text" name="username" maxlength="250" required/>
					<input type="password" name="password" maxlength="250" required/>
					<input type="submit" name="submit" value="Login"/>
				</form>		
			</section>
		</header>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Films</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Fan club</a></li>
			</ul>
		</nav>
		<article>
			<img src="Images/plane.png" alt="plane"/>
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.</p>
			<a href="#">read next</a>
		</article>
		[b]<aside>
			<img src="Images/soon.png" alt="Soon" />
			<h3>Frozen</h3>
			<video controls poster="Images/video.png" src="http://www.dailymotion.com/video/x157pa9_frozen-la-reine-des-neiges-full-uk-trailer-vo-hd1080p_shortfilms"></video>
			<h4>Synopsis</h4>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
		</aside>[/b]
		<section>
			<img src="Images/wall-e.png" alt="wall-e"/>
			<h3>Wall-E</h3>
			<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis.</p>
		</section>
		<section>
			<img src="Images/princess.png" alt="Princess"/>
			<h3>Princess</h3>
			<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis.</p>
		</section>
		<section>
			<img src="Images/monster.png" alt="Monster & ci"/>
			<h3>Monster & Ci</h3>
			<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis.</p>
		</section>
		<section>
			<img src="Images/ralph.png" alt="Ralph"/>
			<h3>Ralph</h3>
			<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis.</p>
		</section>
	[b]</div>[/b]
	<footer>
		<section>
			<section>
				<h3>Site links</h3>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Films</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Fanclub</a></li>
				</ul>
			</section>
			<section>
				<h3>Legal</h3>
				<ul>
					<li><a href="#">Therm of services</a></li>
					<li><a href="#">Privacy policy</a></li>
					<li><a href="#">Sitemap</a></li>
				</ul>
			</section>
			<section>
				<h3>Newletter Signup :</h3>
				<form>
					<label>Email adress :</label>
					<input type="email" name="newsletter" required />
					<input type="submit" />
				</form>
			</section>
			<section>
				<h3>Social</h3>
				<ul>
					<li><a href="#">Twitter</a></li>
					<li><a href="#">Facebook</a></li>
					<li><a href="">Google +</a></li>
				</ul>
			</section>
		</section>
	</footer>
[b]</body>[/b]
</html>
En effet c'est bien cela, mais lorsque que je met 100% au html, il prend seulement la taille de mon écran (775px), du coup mon body et wrapper font la meme taille. c'est une histoire de floattant qui sortent du flux non ?
J'ai essayer de mettre un overflow: hidden sur mon wrapper, mais du coup mon contenu est bouffer.
Bin c'est exactement à quoi correspond un "height:100%" Smiley biggrin . Tu pourrais passer dans ce cas par un "min-height".
Donc le fait que mon body soit plus petit que mon contenu, ne pose aucun problème de "propreté" du code ?
Car je n'ai aucun problème d'affichage, seulement l'outil de developement du navigateur qui m'affiche qu'il fait 775px et est plus petit que mon contenu.
Petit up avec un screenshot qui sera plus explicite :
upload/47193-body.jpg
Je ne pense pas que cela soit très propre, même si le rendu est bon.
Tu n'as pas lu mon précédent message ?
Je suppose que ça pourrait être contraignant dans certains cas mais tu peux passer par un "min-height" sur ton <body>.

html {height:100%}
body {min-height:100%}

Ton <html> fait 100% de la hauteur de ton navigateur mais ton <body> s'adaptera à son contenu s'il lui impose une hauteur plus grande que cette dernière.
Bien reçu bien reçu, merci beaucoup pour ton aide précieuse Zelalsan. Je peux maintenant m'attaquer aux médias queries.

Encore merci.
Je crois que j'ai crié victoire trop tot, j'ai un soucis avec la hauteur en pourcentage de tout mes éléments.
Impossible de définir leurs hauteurs en pourcentage, j'en reviens donc au problème de départ.

Mon html est bien a 100%, mon body a min-height: 100%, mon wrapper height : 100%, et mes éléments contenu par mon wrapper (faisant 975px de hauteur) ne prenne les hauteurs qu'en px, je ne comprend plus.

Je pensais avoir saisi le systeme des pourcentage/hauteur mais la ... je suis perdu ...
Modifié par mace (11 Feb 2014 - 11:22)
Bon, je n'ai aucun soucis avec mes hauteurs si toutes mes contenant (html, body, wrapper) sont a height: 100%.
Cela viens donc de ce min-height.
Donc, je reviens sur le "probleme" numero 2, le dernier screen que j'ai posté.

J'ai aucun problème d'affichage du site en soit, mais simplement la "propreté", le body/wrapper ne fait que la taille de mon écran.

Je tourne en rond je crois Smiley confus
min-height ne transmet rien au height de l'enfant
height:xx; fixe une hauteur arbitraire.
si 
html, body {height:100%)
.wrap {min-height:100%;}

.wrap va prendre la hauteur de body en reference qui est valide, et aura au moins la hauteur de body et pourra s'allonger. body lui restera a 100% et ne s'allongera pas.

si tu as un souci de background tu peut te servir de html et .wrap en mettant un bg transparent a body test : http://codepen.io/anon/pen/AywxE
Merci pour ta réponse gcyrillus, mais comme tu l'a dit, la propriété min-height ne transmet rien au height de l'enfant, du coup je ne peux appliquer de hauteur à un élément étant dans mon wrap.
La solution hover aurai pu être interressante, mais le design de mon site change totalement dés lors que le curseur sors, ça pourrai être une solution, mais pas très propre.

Ce qui m'étonne beaucoup, c'est cette configuration :


html{
	min-height: 100%;
}

body{
	height: 100%;
}

#wrapper{
	height: 100%;
}


Mon body prend bien la hauteur du Html (1480px) mais mon wrapper ne prend rien (0px).
Bon, j'ai essayer mon code sur codepen, le résultat est plus logique, mon body ni le wrapper prennent pas la taille du html. CodePen

Je ne peux donc utilisé min-height qui n'est pas pris en compte par les éléments enfant.

J'ai l'impression d'être le seul à rencontrer ce problème, comment font les dev pour faire du responsive sans être embêté de la même manière que moi ?
Modifié par mace (13 Feb 2014 - 10:03)
Sujet clos
Aller à