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

Question

我有一个高度不固定的元素。根据它内部元素的数量，它可以增长和增长，但我有一个max-height: 300px;来确保它不会超过 300。
我真正想要的是，当这个元素达到 300px 时，元素底部可能会出现一个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/