Bonjour,
je voudrais donner 100% de largeur d'écran et 95% de hauteur à la div avec la classe "fullscreen" comment puis-je faire s'il vous plait?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YouthSkill</title>
<!-- Bootstrap -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">YouthSkill</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#services" >Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Notre Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="fullscreen" id="YouthSkill">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-example-generic" data-slide-to="1"> </li>
<li data-target="#carousel-example-generic" data-slide-to="2"> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="assets/images/s1.jpg"/>
</div>
<div class="item">
<img src="assets/images/s2.jpg" alt="Second slide"/>
</div>
<div class="item">
<img src="assets/images/s3.jpg" alt="Third slide"/>
</div>
<div class="item">
<img src="assets/images/s4.jpg" alt="fourth slide"/>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/smooth-scroll/dist/js/smooth-scroll.min.js"></script>
<script src="bower_components/nprogress/nprogress.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
8 réponses
Hum
.fullscreen {
width: 100%;
height: 95%;
}Et normalement il faut donner une hauteur à ta page de 100%
html, body {
height: 100%;
}Test et redis nous ...
Salut,
Pour compléter ce que dit Sebdelaforet, vérifie aussi que ta div "row" ai bien une hauteur et une largeur de 100%.
A +
Peut-etre que je me trompe, mais il me semble que pour la HAUTEUR, le % nécessite que le conteneur de l'élément est une taille définie (le % étant le rapport à la hauteur du conteneur). Si le conteneur n'a pas de taille définie alors 100% sera remplacé par auto.
Il me semble aussi que les unités par rapport à la taille de l'écran sont vw et vh.
je dirai donc plutôt :
width: 100vw;
height: 100vh;
@Wizztiti stp tu peux m'expliquer plus en détail comment fonctionne ces propriétés? s'il te plait
va voir sur : http://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html
tu peux aussi lire ça:
http://developer.mozilla.org/fr/docs/Web/CSS/height pour la propriété height,
http://developer.mozilla.org/fr/docs/Web/CSS/length pour les infos sur le type d'unité (px, %, vh, etc...)
Ne préfères tu pas utiliser les positions ?
* {
margin:0;
padding:0;
}
.fullscreen {
background:red;
position:absolute;
left:0;
right:0;
top:5%;
bottom:0;
}