Question

我正在尝试开发一个小模块（比如twitter bootstrap的collapse组件）。

我不知道如何处理正在成长的div的内容，它可能需要我很多描述，没有什么比示例更好：Collapse deployment。

您可以看到div.container这是预定成长/下降的块。在这里，我声明height: 50px来说明部署的状态。

有没有办法隐藏超出父div高度的内容（这里是文本的一部分）？

我喜欢我们只能通过部署另一个来访问内容的想法，但我真的不明白如何在CSS中正确地实现它。

Answer 1

我不确定我理解你在尝试什么，但你可以使用

 overflow:hidden;

在这里演示 - http://jsfiddle.net/JjPcy/1/

Answer 2

喜欢这个？ JSFiddle示例：http://jsfiddle.net/SW86B/1/

更新了CSS

.header {
  background-color: green;
  height:20%;
}

.container {
  background-color: red;
  height: 0;
  overflow: hidden;

  -webkit-transition: height 0.2s ease;
     -moz-transition: height 0.2s ease;
          transition: height 0.2s ease;
}

.container.open { height: 50px;}

p { margin: 0; }

使用jQuery切换状态

$('button').on('click', function(event){
    $('.container').toggleClass('open');
});

Answer 3

将div.container的{{1}} css属性设置为隐藏。

overflow

还要创建一个名为div.container { overflow: hidden; }的类，其宽度为auto-width：

auto

然后使用jQuery切换类并显示容器内的数据：

div.auto-width { width: auto !important; }

以下是演示：http://jsfiddle.net/VE9WR/3/

可以通过很多方式完成。这取决于你在寻找什么;）

如何隐藏/显示动态高度div的内容？

3 个答案: