Hauteur de la Page à 100% de viewport?
je vais commencer par dire que je suis très nouveau au développement web dans son ensemble et que c'est mon tout premier site responsive donc s'il vous plaît être doux et gardez cela à l'esprit, je suis la définition du mot noob à ce stade. Ayant cherché une réponse pendant un certain temps et n'ayant aucune chance j'espère que quelqu'un ici pourrait m'aider.
j'essaie de faire une page d'accueil pour ce site. La conception est simplement un bloc en bas du côté gauche de la page montrant le logo en haut et puis une série de liens en dessous, tous sur le même fond. À droite de ce est une grande image qui remplit le reste de l'écran. Je veux que toute la page remplisse la fenêtre du navigateur de n'importe quel périphérique sur lequel il est vu donc absolument aucun défilement est nécessaire, i.e. la largeur et la hauteur à la fois 100% du viewport. La largeur de la page ne me donne aucun chagrin du tout, s'ajustant doucement aux différentes tailles d'écran comme je le veux, avec la barre latérale à 20% de la largeur et l'image principale à 80%.
La taille est une autre histoire cependant. Je ne peux pas sembler, dans n'importe quelle combinaison de CSS que j'ai essayé jusqu'à présent, pour être en mesure d'obtenir la hauteur de se comporter à 100% du viewport. Soit la barre latérale est trop courte et l'image principale est trop longue, soit les deux sont trop longues, etc. L'image principale que je veux garder le rapport d'aspect de et juste le faire déborder c'est div comme requis pour garder la plupart de lui affiché et la barre latérale que je veux juste ajuster à 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 avec ce serait vraiment apprécié et n'hésitez pas à signaler toute massivement amateur des erreurs. Je suis prêt à prendre toute critique et apprendre de lui. Merci
2 réponses
j'ai fait de toi un set de base pour montrer comment vous style. La meilleure façon que j'ai trouvé à la hauteur de 100% avec l'utilisation de jQuery/Javascript. Vous pouvez trouver la hauteur de la fenêtre, puis entrée dans le css avec l'utilisation de l'informatique.
La façon dont cela fonctionne est la var wH = $(window).height(); c'est de trouver la hauteur et la transformant en un nombre. Ensuite, lorsque vous utilisez $('.sideBar').css({height: wH}); vous entrez la hauteur dans le css de encadré.
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 à 100% de la fenêtre du navigateur.
je recommande également la possibilité de transformer cette nav dans un ul j'ai inclus dans le violon pour montrer comment c'est possible.
JSFIDDLE (Supprimer "show" à la fin de l'url pour voir le code)
La prochaine chose que vous aurez besoin de recherche est media queries pour ajuster le contenu pour mieux s'adapter aux appareils mobiles. Envisagez de changer la barre latérale pour une navigation horizontale sur les appareils mobiles.
Si vous voulez un pur CSS une seule approche, alors vous pouvez faire quelque chose comme cela,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
en ajoutant hauteur&largeur à 100% dans votre html/body vous pouvez ensuite utiliser height: 100% sur les autres éléments pour remplir toute la page.
se Référer à cette JSFIDDLE pour voir comment cela fonctionne.
<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;
}
ça marche pour moi.