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/

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

1 个答案: