On industrukt.pl/dev/ap/barbara.html, I am struggling to make the background color of the article section extend 100% of the photos. Currently, I have set a constant height value, but this solution is not ideal. When the browser window is resized to mobile or tablet resolution, the background color does not cover the entire photo content.
https://i.sstatic.net/XE2Fh.png
Any suggestions on how to fix this issue?
Here is my HTML code:
<div class="content">
<aside>
<ul>
<li style="margin-bottom:30px"><a href="index.html#tresc">selected works - home</a></li>
<li style="margin-top:30px;" class="selected"><a href="#">Barbara</a></li>
<li><a href="fellig.html">Fellig</a></li>
...
[Full list of items in the aside section]
</ul>
</aside>
<article style="margin-top:135px">
<div class="photos">
[...]
[List of thumbnail images for the article]
[...]
</div>
</article>
<!-- End Content -->
</div>
<div class="bcg"></div>
This is my CSS code:
.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;
}