Height to work with Precentages

[CollinsGA]

Hi,

I have a problem with getting heights to work on percentages in CSS rather than specific lengths.

In this website: http://arcan3.co.uk/coldharbourconstruction I have the background photo to fit to the browser so that if the browser is made smaller, or it is viewed on a phone, the whole photo covers the browser and is not cut etc.

To the left, there is also a news feed which fits in with the photo at a specific position at a specific size. Obviously, if the photo is subject to getting bigger or smaller, the size and the position of the news feed must also be able to do so as well. Therefore the size and the position of the news feed works on percentages rather than specific lengths so that when resized it will fit in.

This seems to be working fine for all the positions, sizes and widths. However, as you will be able to see with the scroll bar, i can not get it to work with the height. Would anyone have any ideas how I can set the height of the div (so that the scroll bar can do its job) to vary with size as well, so that if the browser is made smaller, and so therefore the news feed made smaller, the height of the div will also decrease, and so therefore the scroll bar.

Here is the newsfeed code, which is placed inside the main page via a include link.


<link href="http://arcan3.co.uk/coldharbour/styles/news.css" rel="stylesheet" type="text/css"></link>

<div class="news_module">

<div style=" height:1%; width:22%; overflow-y:scroll; ">
<?php

$sql = "SELECT * FROM CHnews WHERE Display = 1 ORDER BY PostDate DESC, ID DESC"; //mySQL query
$result = mysql_query($sql,$con); //run query

$lc=0;
while(($row = mysql_fetch_array($result)) && ($lc<20))

{ ?>
<br/>

<div class="news_post">
<a href="<?php echo $row['Link'] ?>" target="_blank">
<span class="dat"> <?php echo datefmt($row['PostDate'])?></span>
<br/>

<span class="col_b"><?php echo $row['Title'] ?></span>

<p><?php echo html_entity_decode($row['Description'],ENT_QUOTES) ?></p>
</a>
<br />
</div>
<?php $lc++; }; ?>
</div>
</div> <!-- news_module -->

Here is the css that the above references.


#news{
position: absolute;
margin: 46% 0% 0% 2.5%;
width: 23%;
height: 32.9%;
}
.news_module{
height: 0.1%;
min-height:400px;
margin: 36.4% 0% 0% 2%;
padding: 7% 0px 0px 1%;
background: url(http://arcan3.co.uk/images/coldharbour/newsfeedwhole.png) no-repeat ;
background-size:23%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/newsfeedwhole.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/newsfeedwhole.png', sizingMethod='scale')";
min-width:1000px;
min-height:400px;

}



.news_post {
position: relative;
background: url(http://arcan3.co.uk/images/coldharbour/stack2.png) no-repeat;
background-size:20%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/stack2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/stack2.png', sizingMethod='scale')";
padding: 0% 0px 0px 30%;



}
span { color:#000000; }

.dat { text-decoration: underline;
color:#000000;
}
.col_b {
color:#000000;
opacity:1;
width: 200px;
font-weight:bold;
text-overflow:ellipsis;
overflow: hidden;
}

And is of interest/help, the newsfeed is within a further div called "ch_main" which itself is in the body. Seen here:


#ch_main{
position: absolute;
width: 100%;
min-height:1000px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
background: url(http://arcan3.co.uk/images/coldharbour/chback.jpg) #000000 no-repeat top ;
background-size:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/chback.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/chback.jpg', sizingMethod='scale')";
min-width:1000px;
min-height:1000px;
}

body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: #000000;
height:100%;
}


Hope someone can help! thanks :)