CSS背景拉伸到窗口底部？

发布于 2024-11-25 15:12:03 字数 8276 浏览 0 评论 0原文

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

我正在尝试找出一种方法来获取透明背景（使用background:rgba 属性）可拉伸页面的整个高度，无论分辨率如何。

我尝试将容器、html 和正文高度设置为 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;
}

原文

I am helping to redesign a website www.liveatsheastadium.com/test

I am trying to figure out a way to get the transparent background (using the background:rgba property) to stretch the entire height of the page regardless of resolution.

I have tried setting the container, html and body height to 100% and using the background:cover property.

Any ideas on how to get the background to extend to the bottom of the page regardless of broswer window size?

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅紫色的梦幻 2024-12-02 15:12:03

添加这些规则：

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

#container{
    min-height:100%;
}

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

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 颜色。

Add these rules:

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

#container{
    min-height:100%;
}

However, min-height isn't fully supported in all browsers. If you use height instead it will cause problems if the content in container is higher than the page. To work around this, you could create a 100% x 100% div as a duplicate of body, give it a background image that is your transparent overlay, and set its overflow to auto, so it behaves like a second body tag.

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 would be containerWidth x 1px filled with the rgba color you wanted as the container background.

回复收藏 0 原文