CSS背景延伸到窗口底部？
我正在帮助重新设计一个网站 我正试图找到一种方法来获得透明背景（使用background:rgba属性）以拉伸页面的整个高度，而不考虑分辨率 我尝试将容器、html和主体高度设置为100%，并使用background:cover属性 关于如何让背景延伸到页面底部，而不考虑broswer窗口大小，有什么想法吗CSS背景延伸到窗口底部？,css,background,stretch,Css,Background,Stretch,我正在帮助重新设计一个网站 我正试图找到一种方法来获得透明背景（使用background:rgba属性）以拉伸页面的整个高度，而不考虑分辨率 我尝试将容器、html和主体高度设置为100%，并使用background:cover属性 关于如何让背景延伸到页面底部，而不考虑broswer窗口大小，有什么想法吗 <body> <div id="container"> <div id="mainContent"> <ul id="nav
<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-->
body, html{
height:100%;
margn:0;
padding:0;
}
#container{
min-height:100%;
}
minheight高度溢出设置为自动
，使其行为类似于第二个body标记
HTML:
transparent.png将是containerWidth x 1px，填充您想要作为容器背景的rgba颜色。视口高度适用于现代浏览器
试试这个：
高度：100vh
以下是支持（ie11+）：
谢谢，第一部分起作用了。第二部分（使用重复的img切片）可能是必要的。哪些浏览器不支持最小高度？不支持的浏览器都是旧的。这里的全部细节：无论多么冗余，它似乎是唯一的解决方案。。。如果内容比页面长，并且html具有用于页面边距的背景，则第一种方法会中断—该背景在折叠后立即开始。如果你在任何地方设置“最小高度：100%”，它都不起作用。
body, html{
height:100%;
margn:0;
padding:0;
}
#container{
min-height:100%;
}
<body>
<div id='body2'>
//container
</div>
</body>
body{
margin:0;
padding:0;
background:_image_;
}
#body2{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:auto;
background:url(transparent.png) center top repeat-y;
}