Definir des valeurs fixe à une section

Par Ekim Kael, il y a 9 ans

Les bases HTML/CSS

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

Sebdelaforet, il y a 9 ans

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 ...

Whysyb, il y a 9 ans

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 +

Ekim Kael, il y a 9 ans

Merci les gars

wizz, il y a 9 ans

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;

Ekim Kael, il y a 9 ans

@Wizztiti stp tu peux m'expliquer plus en détail comment fonctionne ces propriétés? s'il te plait

coloo, il y a 9 ans

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; }
Ekim Kael, il y a 9 ans

@coloo toute suggestion est bonne ça peux m'aider à tout moment.
merci