仅当高度超过 300 像素时才对元素应用边框

Question

我有一个高度不固定的元素。根据其中的元素数量，它可以不断增长，但我有一个max-height: 300px; 以确保它不会超过 300。
我真正想要的是，当这个元素达到 300 像素时，一个solid 2px 边框可以出现在元素的底部（向用户发出他现在可以滚动的信号）。

你知道一个 CSS 解决方案吗？如果我必须依赖 Javascript，你会怎么做（我使用 Angular）？

Answer 1

我看到你已经在 angularjs 中添加了标签。让我们尝试为此创建一个自定义属性指令：

directive('maxHeightBorder', function(){
    return {
        restrict: 'A',
        link: function(scope, el, attr){
            if(el.height() >= attr.maxHeightBorder){
                el.css('border-bottom','2px solid');
            }
        }
    }
});

然后像这样简单地使用它：

<div max-height-border="300"> <!-- set your max height here -->
</div>

当渲染高度达到 300px 时，会出现一个2px solid border-bottom

JSFiddle： http://jsfiddle.net/7auQw/