5

有没有一种优雅的方法可以在容器的高度上设置断点。

例子：

假设您有一个 div 并且最小高度设置为 100px。一旦内容变得太多，它不仅会增长，还会再增长 100 像素，当内容最终到达 200 像素的底部时，高度会再增加 100 像素。

有没有人做过这样的事情？

4

3 回答 3

2

我认为这仅使用 CSS 是不可能的，但您可以使用 javascript：

html:

<div id='div'>hello</div>

javascript:

var div = document.getElementById('div');
var height = 0;
div.style.height = height + "px";

while(div.scrollHeight > div.clientHeight){
    height += 50;
    div.style.height = height+"px";
}

http://jsfiddle.net/fa7d0/JkT7R/

于 2013-08-04T13:33:58.560 回答
1

我发现您的问题非常有趣，因此我从字面上理解了增长位并创建了一个小提琴，其中处理内容更改并且包含的​​ div 在宽度或高度上增加了定义的阈值。

小提琴：http: //jsfiddle.net/Tvswj/1/

主要思想是您只需要监听 DOM 更改，然后运行 ​​jQuery 函数，如下所示：

// Trigger the resize function on content change
$(myDiv).bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function () {
    $(this).breakpointResize(threshold);
});

如果您觉得它有用，请继续使用它并根据需要进行修改。

DOM 事件的功劳：当 div 内容使用 jquery 更改时如何发出警报

于 2013-08-04T13:59:46.853 回答
1

您可以使用容器样式 height: auto ！重要的; 最小高度：100px；宽度：100%；

于 2017-01-20T03:39:52.033 回答