Question

我正在帮助重新设计网站www.liveatsheastadium.com/test

我正试图找出一种方法来获得透明背景（使用background：rgba属性）来拉伸页面的整个高度而不管分辨率。

我尝试将容器，html和body身高设置为100％并使用background：cover属性。

有关如何将背景扩展到页面底部的任何想法，无论窗口大小如何？

<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&amp;show_comments=false&amp;auto_play=false&amp;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&amp;show_comments=false&amp;auto_play=false&amp;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-->

和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;
}

Answer 1

添加以下规则：

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

#container{
    min-height:100%;
}

但是，并非所有浏览器都完全支持min-height。如果您使用height，则如果容器中的内容高于页面，则会导致问题。要解决此问题，您可以创建100％x 100％div作为正文的副本，为其提供透明叠加层的背景图像，并将其overflow设置为auto，这样就可以了比如第二个身体标签。

HTML：

<body>
    <div id='body2'>
        //container
    </div>
</body>

CSS：

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

transparent.png将是containerWidth x 1px，填充了您想要作为容器背景的rgba颜色。

Answer 2

视口高度适用于现代浏览器。

尝试一下：高度：100vh;

以下是支持（即11+）： https://caniuse.com/#search=vh

CSS背景伸展到窗口底部？

2 个答案: