根據礦山項目內容的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; 
} 

當你到控制檯，你會看到瀏覽器抱怨

預期的價值結束，但找到'背景顏色'。解析'height'的值時出錯。聲明下降了。

或一些類似的消息。

要查看整個內容，請刪除overflow: hidden。無論如何，你的網站並沒有http://industrukt.pl/dev/ap/barbara.html。

請參閱JSFiddle。