18015 sujets

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

[Résolu] Problème hauteur en %

Bonjour,
J'ai commencé à réaliser mon premier site web de photographie, avec scroll horizontal, mais là n'est pas la question.

J'ai plusieurs balises, une pour header, et une autre pour mon contenu.
J'aimerais que la hauteur de mon contenu s'adapte en fonction de la hauteur de la page.
Pour cela j'ai utilisé "height:100%;" sur mon "body" et 80% sur "contenu", et je ne sais pour qu'elle raison, mon contenu ne s'adapte absolument pas a ma page.

Après plusieurs recherches sur le web, je n'est trouvé aucune solution.

LE CODE HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Julien Helaine Portfolio</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

</head>

<body>


<div class="header">
    <div class="title">
        <h1>JULIEN</h1>
        <h1>HELAINE</h1>
        <h3>PHOTOGRAPHY</h3>
    </div>

    <div class="navigation">
        <ul>
            <li>STREET</li>
            <li>PORTRAIT</li>
            <li>LANDSCAPE</li>
            <li>PARTY</li>
            <li>WTF</li>
        </ul>
    </div>
</div>



<div class="contenu">
<img src="test.jpg" />
</div>



</body>
</html>




LE CSS


@charset "utf-8";
/* CSS Document */





body {
	
	font-family: 'Montserrat', sans-serif;
	background-image: url(badboy.jpg);
 	 background-repeat:no-repeat; 
 	 background-size: cover;
 	 -moz-background-size: cover;  /* Firefox 3.6 */
 	 background-position: center; 
 	 background-attachment:fixed;
	 background-color:#000;
	 height:100%;
	 padding:0;
	 margin:0;

}



h1 {
	font-weight:700;
	font-size:24px;
	color:#FFF;
	line-height:20px;
	padding:0px;
	margin:0px;
}


h3 {
	margin-top:11px;
	font-weight:400;
	font-size:12px;
	color:#FFF;
	line-height:0px;
}

.header {
	background-color:#0CC;
	height:100px;
	width:100%;}


.title {
	float:left;
	margin-top:20px;
	padding-left:8%;
	}


.navigation {
	margin-top:40px;
	padding-right:8%;
	color:#999;
	float:right;
	}
	
ul {
	padding: 0;
	margin:0;
    }

li {
	font-size:13px;
	margin-left:2px;
	display:block;
	 float:left;   
 	width:auto;
	 text-decoration:none;
 	text-align:center;
	 list-style-type: none;
 background-image: url(puce.gif);
 background-repeat: no-repeat;
 background-position: 0px 0px;
 padding-left: 15px;
 padding-right: 15px;
	}
	

a:link, a:visited {color:#999;}
a:hover, a:active {color:#FFF;}



.contenu{
	clear:both;
	padding-bottom:50px;
	width:100%;
	height:100%;
	background-color:red;

}

img {
	height:50%;
	width:auto;
}
Sujet clos
Aller à