web-dev-qa-db-fra.com

Hauteur de page à 100% de la fenêtre?

Je commencerai par dire que je suis très novice dans le développement Web dans son ensemble et qu’il s’agit de mon tout premier site réactif. Soyez donc doux et gardez cela à l’esprit, je suis la définition du mot noob à ce stade. Ayant cherché une réponse pendant un moment et n'ayant pas de chance, j'espère que quelqu'un ici pourra m'aider.

J'essaie de faire une page d'accueil pour ce site. La conception est simplement un bloc en bas à gauche de la page avec le logo en haut, puis une série de liens en dessous, tous situés sur le même arrière-plan. A droite de celle-ci se trouve une grande image qui remplit le reste de l'écran. Je souhaite que toute la page remplisse la fenêtre du navigateur de l’appareil sur lequel elle est visualisée. Aucun défilement n’est donc nécessaire, c’est-à-dire la largeur et la hauteur, toutes les deux à 100% de la fenêtre. La largeur de la page ne me cause aucun chagrin, je m'adapte doucement aux différentes tailles d'écran comme je le souhaite, avec la barre latérale à 20% de la largeur et l'image principale à 80%.

La hauteur est une histoire différente cependant. Je ne peux pas sembler, quelle que soit la combinaison de CSS que j'ai essayée jusqu'à présent, être capable de se comporter à hauteur de 100% de la fenêtre d'affichage. Soit la barre latérale est trop courte et l'image principale est trop longue, soit les deux sont trop longues, etc. etc. L'image principale dans laquelle je souhaite conserver le rapport de format et le faire déborder est divisée comme il convient pour que la majeure partie soit affichée et le côté Je veux juste adapter à 100% de la hauteur de la page. Voici mon code à l'heure actuelle: 

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
height: 100%;
margin: 0;
padding: 0;
}

#page 
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}

#mainimg
{
width: 100%;
overflow: hidden;
}

.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00); 
}

@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}

</style>
</head>

<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
    <div class="link" id="homelink">Home<!--Home link--></div>
    <div class="link" id="aboutlink">About<!--About link--></div>
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
    <div class="link" id="priceslink">Prices<!--Prices link--></div>
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
    <div class="link" id="contactlink">Contact<!--Contact link--></div>
    <div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>

Toute aide à cet égard serait vraiment appréciée et n’hésitez pas à signaler toute erreur massivement amateur. Je suis prêt à accepter toute critique et à en tirer des leçons. Merci

csshtml5css3height
19
Dan

Je vous ai préparé un ensemble de base pour montrer votre style. Le meilleur moyen que j’ai trouvé de régler la hauteur à 100% est d’utiliser jQuery/Javascript. Vous pouvez trouver la hauteur de la fenêtre et ensuite la saisir dans le css en l'utilisant.

La façon dont cela fonctionne est le var wH = $(window).height(); qui recherche la hauteur et la convertit en nombre. Ensuite, lorsque vous utilisez $('.sideBar').css({height: wH});, vous entrez la hauteur dans le css de sideBar.

jQuery

function windowH() {
   var wH = $(window).height();

   $('.sideBar, .mainImg').css({height: wH});
}

windowH();

Cette fonction que j'ai écrite donne à ces deux éléments la hauteur de la fenêtre. Cela permettra à ces deux éléments d'être 100% de la fenêtre de n'importe quel navigateur.

Je recommande également de transformer cette nav en une ul que j'ai incluse dans le violon pour montrer comment cela est possible.

JSFIDDLE (Supprimer 'show' à la fin de l'URL pour voir le code)

La prochaine chose que vous devez rechercher est media queries pour ajuster le contenu afin de mieux s’adapter aux appareils mobiles. Envisagez de remplacer la barre latérale par une navigation horizontale lorsque vous vous trouvez sur des appareils mobiles.

Si vous voulez une approche uniquement CSS pure, vous pouvez faire quelque chose comme ceci,

html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}

En ajoutant hauteur et largeur à 100% dans votre html/body, vous pouvez ensuite utiliser height: 100% sur d'autres éléments pour remplir la page entière.

Reportez-vous à ce JSFIDDLE pour voir comment cela fonctionne.

En savoir plus sur la conception de sites Web adaptatifs

18
Josh Powell

Voici un exemple de code simplifié du code HTML:

<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>

et voici le CSS utilisant vh:

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

D'ici: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Ça marche pour moi.

43
Foad Tahmasebi

Exemple de code pour exact Couvrant la hauteur de la page.

HTML

<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

CSS

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.container {
 max-width: 1020px;
 margin: auto;
 height: 100%;
 background: #ddd;
 padding:16px;
 box-sizing:border-box
}
.header,.content{
 background:#fff;
 padding:16px
}
.content{
 margin-top:16px;
 min-height:calc(100% - 160px);
}

Exemple de lien: https://codepen.io/rahdirs/pen/jeRVod

0
Sridhar

Sur Chrome, il suffit d’ajouter display: flex à la body.

Sur Firefox, vous devez ajouter height: 100% pour obtenir le résultat souhaité. Et un margin: 0 supprimera les barres de défilement ennuyeuses.

<body style="display:flex; height: 100%; margin: 0;">
  <div style="background-color: red; flex:1;"></div>
  <div style="background-color: green; flex:2;"></div>
  <div style="background-color: blue; flex:1;"></div>
</body>
0
bittnkr