La hauteur de la Page à 100% de la fenêtre d'affichage?

Je vais commencer par dire que je suis très très nouveau dans le développement web dans son ensemble et que c'est mon tout premier site responsive, donc soyez doux et garder cela à l'esprit, je suis à la définition du mot noob à ce stade. Après avoir cherché une réponse pour un moment et de n'avoir aucune chance, je suis en espérant que quelqu'un ici pourrait m'aider.

Je suis en train de faire une page d'accueil de ce site web. Le design est tout simplement un bloc sur le côté gauche de la page présentant le logo du haut, puis une série de liens en dessous, tout ce qui est sur le même arrière-plan. À droite de ce est une grande image qui remplit le reste de l'écran. Je veux que la page entière pour remplir la fenêtre du navigateur de n'importe quel appareil il est consulté sur donc absolument pas de défilement est nécessaire, c'est à dire la largeur et la hauteur de deux à 100% de la fenêtre d'affichage. La largeur de la page est de me donner aucun chagrin à tous, doucement adapter à différentes tailles d'écran comme je le veux, avec la barre latérale à 20% de la largeur et de l'image principale à 80%.

La hauteur est une autre histoire cependant. Je n'arrive pas, 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% de la fenêtre d'affichage. Soit la barre latérale est trop court et l'image principale est trop long ou les deux sont trop long etc etc. Le principal image que je veux garder le ratio d'aspect et de l'avoir juste débordement c'est de la div que nécessaire pour maintenir la plupart de l'affiche et la barre latérale, je veux juste apte à 100% de la hauteur de la page. Voici mon code:

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

L'aide de 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. Grâce

La première chose que je peux suggérer, c'est d'enlever cette étiquette de style et de transfert de la css à sa propre page. Si vous allez apporter des requêtes de média et de tout ce qui, dans cette équation, alors vous besoin d'un css de la page.
donc, ce sont tous recommandés scrset tailles pour tous les points d'arrêt de hauteur totale, y compris la verticale de la fenêtre d'affichage? je sais 1600x900 mais je vais avoir des ennuis avec les verticales

OriginalL'auteur Dan | 2013-10-30

18

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(); est de trouver la hauteur et la transformant en un nombre. Ensuite, lorsque vous utilisez $('.sideBar').css({height: wH}); vous êtes à l'entrée de la hauteur dans le css de la barre latérale.

jQuery
```
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
```
Cette fonction que j'ai écrit est en donnant à ces deux éléments de 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 qui 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 d'adapter le contenu pour mieux s'adapter aux appareils mobiles. Envisager de modifier la barre latérale pour une navigation horizontales lorsque sur des appareils mobiles.

Si vous voulez un pur CSS seule approche, alors vous pouvez faire quelque chose comme cela,
```
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
```
En ajoutant la hauteur&largeur à 100% dans votre html/body vous pouvez ensuite utiliser height: 100% sur d'autres éléments à remplir toute la page.

Reportez-vous à cette JSFIDDLE pour voir comment il fonctionne.

Utile de lire à propos de responsive web design

C'est génial et un grand merci pour avoir été si utile Josh n'ai pas encore essayé mais plus tard et de voir comment j'arrive sur. Un rapide écrémé sur les liens que vous avez fourni les montre à l'air très utile pour moi, donc merci pour ça aussi. J'avais déjà prévu d'utiliser les requêtes des médias à un point de rupture pour passer à un défilement vertical mise au portrait de la tablette de la taille et ci-dessous, je voulais juste corriger ce problème avant de me plonger dans cette!! Merci beaucoup encore une fois
Pas de problème! Je n'ai jamais fait une mise en page comme ceci j'ai donc pensé qu'il pourrait être bénéfique pour les deux d'entre nous. Vous pouvez également définir les hauteurs de la sorte: var wH = $(window).height()/2; ce serait 1/2 de la hauteur, var wH = $(window).height()/4; et ce serait 1/4 de la hauteur. Si cette réponse vous a aidé, n'oubliez pas de marquer que le droit de réponse. Bonne chance dans votre conception, et n'hésitez pas à me poser des questions!
Il fonctionne de manière impressionante grâce. Réponse 🙂
Le "pur CSS" réponse ne fonctionne que pour les descendants directs de body, si l'élément du conteneur a une hauteur différente (plus haut de la fenêtre d'affichage du navigateur), que le réglage de cet élément height à 100%, va le rendre plus fort que la fenêtre d'affichage. Le meilleur de la "pure CSS" approche consiste à utiliser vh, comme dans @Arshen la réponse ci-dessous.
Ah enfin une solution facile. Je vous remercie.

OriginalL'auteur Josh Powell
43

Ici est juste une simplification exemple de code HTML:
```
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
```
et voici le CSS à l'aide vh:
```
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
```
À Partir D'Ici: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Cela fonctionne pour moi.

C'est la meilleure et la plus simple de répondre!!
C'est la bonne façon de le faire, et doit être accepté de répondre.

OriginalL'auteur Foad Tahmasebi

Exemple de code exacte 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

OriginalL'auteur Sridhar

Vous devez vous connecter pour publier un commentaire.