CSS фон, чтобы растянуть до нижней части окна? - PullRequest
Новая
       28

CSS фон, чтобы растянуть до нижней части окна?

3 голосов
/ 21 июля 2011

Я помогаю изменить дизайн сайта 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;
}

Ответы [ 2 ]

9 голосов
/ 21 июля 2011

Добавьте эти правила: 

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

#container{
    min-height:100%;
}

Однако min-height поддерживается не полностью во всех браузерах. Если вместо этого вы используете height, это вызовет проблемы, если содержимое в контейнере будет больше, чем страница. Чтобы обойти это, вы можете создать div 100% x 100% как дубликат тела, дать ему фоновое изображение, которое будет вашим прозрачным наложением, и установить его 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, который вы хотите использовать в качестве фона контейнера.

0 голосов
/ 11 сентября 2018

Высота окна просмотра работает для современных браузеров.

Попробуйте это: высота: 100vh;

Вот поддержка (т.е. 11 +): https://caniuse.com/#search=vh

...