0

在 industrukt.pl/dev/ap/barbara.html 中，我需要文章部分的背景颜色（我的是白色）到 100% 的照片。现在我添加了一个恒定的高度，但这并不好。当浏览器窗口调整为例如手机或平板电脑分辨率时，背景颜色不是照片内容的 100%。

http://i.imgur.com/u72bEeh.png

我该如何解决？

我的代码html：

<div class="content">
    <aside>
        <ul>
            <li style="margin-bottom:30px"><a href="index.html#tresc">wybrane prace - home</a></li>
            <li style="margin-top:30px;" class="selected"><a href="#">Barbara</a></li>
            <li><a href="fellig.html">Fellig</a></li>
            <li>Nix oder Langeweile</li>
            <li>Tereska</li>
            <li>Lee B&W</li>
            <li>Lee</li>
            <li>Eine Zusammenarbeit</li>
            <li>Fritzi</li>
            <li>St. Annas</li>
            <li>Ania</li>
            <li>Rosa</li>
            <li>Hannes Part I</li>
            <li>Hannes Part II</li>
            <li>Fotoalbum</li>
            <li>Michał & Kuba</li>
            <li>Selbstportrait</li>
            <li>Lizl</li>
            <li>Karolina</li>
            <li>Hannes Express</li>
            <li>Franziskas Familie</li>
        </ul>
    </aside>

    <article style="margin-top:135px">
        <div class="photos">
            <img class="thumbnail"  src="img/gallery/barbara/1.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/2.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/3.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/4.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/5.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/6.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/7.jpg"/>
            <img class="thumbnail"  src="img/gallery/barbara/8.jpg"/>
        </div>
    </article>

    <!-- End Content -->
</div>
<div class="bcg"></div>

CSS 代码：

.content {
    width: 100%;
    height: 100%
    background-color: #fff;   
    padding-bottom: 30px;
    position: relative;
    overflow: hidden;
}

article {
    padding-left: 37px;
    max-width: 1200px;
    font-family: Open Sans;
    font-size: 10px;
    letter-spacing: 1px;
    float: left;
    position: absolute;
    padding-top: 40px;
    margin-left: 272px;
    z-index: 100;
}

.photos {
    background-color: red;
    height: 100%;
    background-repeat: repeat-y;
}

.bcg {
    background-color: #fff;
    height: 100%;
    background-repeat: repeat-y;
    overflow: hidden;
}
4

1 回答 1

1

You miss a semicolon ; after height 

.content {
width: 100%;
height: 100%;
background-color: #fff;   
padding-bottom: 30px;
position: relative;
overflow: hidden;
}

When you look into the console, you will see the browser complain about

Expected end of value but found 'background-color'. Error in parsing value for 'height'. Declaration dropped.

or some similar message.

To see the whole content, remove the overflow: hidden. You don't have this in your website at http://industrukt.pl/dev/ap/barbara.html anyway.

See JSFiddle for playing.

于 2013-05-07T21:28:00.467 回答