html - 继续添加 <li> 到 <ul> 直到达到高度

Question

我为我的 Facebook 页面构建了一个自定义的 Facebook 侧边栏，它在 UL 内的 LI 标签中显示消息。

我不希望这个 UL 框变得比页面的其他内容更长，所以我让它显示前 5 条消息。

最近，我开始发布更长的消息，因此这 5 条消息变得比其他内容更长。现在可以减少 5 条消息，比方说:3 条消息。

然而，这需要每周手动调整，这不是最佳选择。

现在我已经让我的 ul 具有以下 css 属性:

.facebooklist{ 高度:800px； 溢出: Conceal } 然而，这会切断最后一条消息。

我想显示尽可能多的包含我的页面消息的 li 项，直到框的高度达到 800 像素或更高。

这可能吗？如果是这样，怎么做到的？

作为引用，请在此处查看我的页面: Image

侧边栏位于右侧。

代码:

<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&amp;send=false&amp;layout=standard&amp;width=10&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35&amp;appId=520187094675923&amp;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>

提前致谢!

Answer 1

考虑放置 overflow: auto; 并避免痛苦。

您无法在 HTML 中的文本显示之前对其进行测量。正如@Zim84 所说，JS 是您唯一的解决方案，但它只是一种视觉效果。 HTML 仍将存在于您的页面中，只是您将从 DOM 树中删除它。