Fond de CSS pour étirer au bas de la fenêtre?
J'aide à la refonte d'un site web www.liveatsheastadium.com/test
Je suis en train d'essayer de trouver un moyen pour obtenir l'arrière-plan transparent (à l'aide de l'arrière-plan:rgba propriété) s'étendent sur toute la hauteur de la page, quelle que soit la résolution.
J'ai essayé le réglage du conteneur, html et la hauteur du corps à 100% et à l'aide de l'arrière-plan:le couvercle de la propriété.
Aucune idée sur la façon d'obtenir de l'arrière-plan s'étendre vers le bas de la page, quelle que soit la taille de la fenêtre du navigateur?
<body>
<div id="container">
<div id="mainContent">
<ul id="nav">
<li><img src="images/nav/archives.jpg" /><a href="archives.html" title="archives">archives</a></li>
<li><img src="images/nav/calendar.jpg" /><a href="calendar.html" title="calendar">calendar</a></li>
<li><img src="images/nav/studio.jpg" /><a href="studio.html" title="studio" >studio</a></li>
<li><img src="images/nav/blog.jpg" /><a href="http://sheastadiumbk.blogspot.com/" title="blog">blog</a></li>
<li><img src="images/nav/contact.jpg" /><a href="contact.html" title="contact" >contact</a></li>
</ul>
<div class="blogPost ">
<h2><a href="#">The Lebonese, Tits, and The Chinese at Shea tonight</a></h2>
<p class="date">posted on 7.15.11</p>
<h3>Face Melting, coke snorting good times</h3>
<div class="blogBody">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Borem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--END BLOGBODY-->
<div class="meta">
<ul>
<li><a href="http://google.com ">read more...</a></li>
<li><a href="">Tweet This</a></li>
<li><a href="">re-post on facebook</a></li>
</ul>
</div><!--end META-->
</div><!--END BLOGPOST-->
</div><!--END MAIN CONTENT-->
<div id="aside">
<ul id="socialIcons">
<li><a href="http//twitter.com"><img src="images/icons/facebook.png" alt=""/></a></li>
<li><a href="http//facebook.com"><img src="images/icons/twitter.png" alt=""/></a></li>
<li><a href="subscribeToMailingList"><img src="images/icons/rss.png" alt=""/></a></li>
</ul>
<div id="tabs">
<div id="latest">
<h2>Latest</h2>
<ul>
<li><a href="">liturgy - 7.04.11</a></li>
<li><a href="">sightings - 7.04.11 (full set)</a></li>
<li><a href="">liturgy - 7.04.11</a></li>
<li><a href="">sightings - 7.04.11 (full set)</a></li>
<li><a href="">liturgy - 7.04.11</a></li>
</ul>
</div>
<div id="sheaFaves">
<h2>Shea Faves</h2>
<ul>
<li><a href="">future islands - 7.4.10</a></li>
<li><a href="">Small Black - 10.15.10</a></li>
<li><a href="">future islands - 7.4.10</a></li>
<li><a href="">Small Black - 10.15.10</a></li>
<li><a href="">future islands - 7.4.10</a></li>
</ul>
</div>
</div><!--END TABS-->
<div id="featuredBand">
<h2>Featured Band:</h2>
<img src="http://www.placehold.it/100" />
<h3><a href="">The Chinese</a></h3>
<p>The Chinese are a Brooklyn Based band whose style mixes blah blah blah blah blah.</p>
</div>
<div id="guestPlaylist">
<h2>Guest Playlist</h2>
<object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F19242183&show_comments=false&auto_play=false&color=000000"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="window"></param><embed wmode="window" allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F19242183&show_comments=false&auto_play=false&color=000000" type="application/x-shockwave-flash" width="100%"></embed> </object> <span><a href="http://soundcloud.com/shlohmo/marvins-room-shlohmos-thru-tha">Marvin's Room (Shlohmo's thru tha floor remix) - Drake</a> by <a href="http://soundcloud.com/shlohmo">shlohmo</a></span>
</div>
</div><!--END ASIDE-->
</div><!--END CONTAINER-->
Et le CSS
body {
background: #000 url('../images/bg-light.jpg') no-repeat top left fixed;
}
#container {
background:rgba(0,0,0,0.65);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
overflow:hidden;
width:1080px;
margin-left:auto;
margin-right:auto;
}
#nav {
padding:15px 0px;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
#nav li {
text-align:center;
width:110px;
float:left;
}
#nav img {
width:60px;
height:60px;
}
#nav a {
font-family:'Oswald', arial, sans-serif;
margin-top:5px;
display:block;
font-size:.80em;
font-weight:500;
letter-spacing: .3em;
text-decoration:none;
color:#ffffff;
text-transform:uppercase;
}
#nav a:hover {
color:#fff;
text-shadow: 2px 2px 3px #bebebe;
}
#socialIcons li {
display:inline;
margin-right:15px;
}
#socialIcons img {
width:50px;
}
#mainContent {
width:70%;
float:left;
}
#aside {
overflow:hidden;
width:30%;
float:right;
}
#tabs, #guestPlaylist, #featuredBand {
margin-bottom:50px;
padding-right:15px;
}
#tabs {
margin-top:115px;
font-family: 'Oswald', arial, sans-serif;
}
#latest, #sheaFaves {
float:left;
width:50%;
}
#aside h2 {
border-bottom:1px dotted #fff;
color:#fff;
letter-spacing:.1em;
margin-bottom:10px;
}
#latest li a, #sheaFaves li a {
font-size:.75em;
}
#tabs-1 li, #tabs-2 li {
letter-spacing:.1em;
font-size:.65em;
line-height:1.3em;
}
#featuredBand {
margin-top:260px;
clear:both;
overflow:hidden;
}
#featuredBand h2 {
margin-bottom:15px;
}
#featuredBand img {
float:left;
width:40%;
margin-right:10px;
}
#featuredBand h3 {
margin-bottom:5px;
}
#featuredBand p {
line-height:1.2em;
}
Nous montrer le code.
OriginalL'auteur Squadrons | 2011-07-21
Vous devez vous connecter pour publier un commentaire.
Ajouter ces règles:
Cependant,
min-height
n'est pas entièrement pris en charge dans tous les navigateurs. Si vous utilisezheight
au lieu de cela il va causer des problèmes si le contenu dans le récipient est plus élevé que celui de la page. Pour contourner ce problème, vous pouvez créer un 100% x 100% div comme un double du corps, de lui donner une image de fond qui est votre superposition transparente, et de définir saoverflow
àauto
, de sorte qu'il se comporte comme une seconde balise body.HTML:
CSS:
transparent.png serait containerWidth x 1px rempli avec la couleur rvba vous voulais que le conteneur de fond.
La non prise en charge des navigateurs sont tous les anciens. Tous les détails ici: developer.mozilla.org/en/CSS/min-height#Browser_compatibility
cependant redondant, il semble que c'est la seule solution... La première approche des pauses si le contenu est plus longue que la page html et dispose d'arrière-plan qui est utilisé pour les marges de page - ce de fond commence juste après le pli. Et si vous le réglez sur "min-height: 100%" partout où il ne fonctionne pas.
OriginalL'auteur John Stimac
Fenêtre d'affichage de la hauteur des œuvres pour les navigateurs modernes.
Essayez ceci:
hauteur:100vh;
Voici le support(ie11+):
https://caniuse.com/#search=vh
OriginalL'auteur oaklandrichie