html - 仅当高度超过 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/