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

当您查看控制台时，您会看到浏览器抱怨

预期价值结束但发现'背景颜色'。解析'height'的值时出错。声明被撤销。

或类似的消息。

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

请参阅JSFiddle进行播放。

根据矿山项目的内容，div的背景高度不起作用

1 个答案: