Keep adding <li> to <ul> until height is reached - html

Question

I've build a custom facebook sidebar of my facebook page, which displays the messages in LI tags, inside a UL.
I do not want this UL box to become any longer than the other content of the page, so I made it display the first 5 messages.
Lately, I've started to post longer messages and therefore the 5 messages became longer than the other content. It is now possible to decrease the 5 messages, to let's say: 3 messages.
This however, requires manual tweaking weekly which is not optimal.
Now I've made my ul have the following css properties:
.facebooklist{
height:800px;
overflow:hidden
}
This however, cuts off the last message.
I would like to display as many li items containing my page messages, until the box reaches 800px or more in height.
Is this possible? And if so, how?
For reference, check my page here:
Image
The sidebar is located at the right.
The code:
<div class = "fbheader"><img class = "flogo" src = "img/f_logo.png"/><a class = "ftext" href="https://www.facebook.com/WIEWIE4life">WIEWIE</a><iframe class ="fiframe" src="//www.facebook.com/plugins/like?href=http%3A%2F%2Fwww.facebook.com%2FWIEWIE4life&send=false&layout=standard&width=10&show_faces=false&font&colorscheme=light&action=like&height=35&appId=520187094675923&locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:25px; float:right;" allowTransparency="true"></iframe></div>
<ul class = "facebooklist">
<?php
$page = file_get_contents('https://graph.facebook.com/WIEWIE4life/feed?access_token=520187094675923|OcGraoxcC7OH7gurPtx9Rqb8KnA');
$data = json_decode($page);
$x = 0;
foreach ($data->data as $news ) {
$StatusID = explode("_", $news->id);
if (!empty($news->message) && !($temp > 5)){
$temp = $temp + 1;
?>
<li class = "bericht">
<?php
$x = new DateTime($news->updated_time);
$x->setTimezone(new DateTimeZone('Europe/Amsterdam'));
$time = $x->format(DATE_ATOM);
$x = explode("T",$time);
$x[1] = substr($x[1],0,-9);
echo "<h6 class = 'date'>". $news->from->name . " - " . $x[0]. " ".$x[1]."</h6>";
?>
<?php
echo "<p class = 'message'>" . $news->message . "</p>";
?>
</li>
<?php
}
}
?>
</ul>
</div>
Thanks in advance!

Answer 1

Consider putting overflow: auto; and spare yourself the pain.
You can't measure text in HTML before it's displayed. As #Zim84 said, JS is your only solution but it's only a visual thing. The HTML will still be in your page, just that you'll remove it from the DOM tree.

Answer 2

Solutions that rely solely on PHP will probably fail, since you cannot really know how long the content will be on which screen resolution and under those 10'000's of possible browser configurations.
Therefore I'd go with JS.
Method one: hold your data in an array and append those <li> as long as the height of the <ul> does not exceed the height of your main content.
Method two: print your <li> normally with php as you did already and remove the last <li>-element with JS as long as the <ul> is bigger than the content.