html - 根据我元素的内容，div 的背景高度不起作用

Question

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

Answer 1

在 height

之后你错过了一个分号 ;

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

当你查看控制台时，你会看到浏览器提示

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

或一些类似的消息。

要查看全部内容，请移除 overflow: hidden。无论如何，您的网站 http://industrukt.pl/dev/ap/barbara.html 中没有这个。

参见 JSFiddle玩。