2

当其中有很多内容时，如何使 div 扩展？

HTML：

<div class ="content">
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
</div><br />
<div class="click-here">Click here to see more</div>

CSS：

div.content
{
    height:100px;
    width:300px;
    border:1px solid red;
    overflow:hidden;
}

div.click-here
{
    border:1px solid green;
    width:200px;
}

这是我的例子：http: //jsfiddle.net/nvCvy/1/

jQuery 还是 CSS？

jquery 滚动会是更好的解决方案吗？还是您会使用 CSS 显示所有内容？

4

3 回答 3

4

您需要进行以下两项更改。

  1. 不要提及高度，即删除height属性。

  2. 消除Overflow:hidden;

下面是工作演示。您可以根据需要添加尽可能多的内容。

于 2012-06-06T13:13:01.870 回答
2

假设您希望用户单击按钮，请使用 jquery：

http://jsfiddle.net/nvCvy/2/

于 2012-06-06T13:11:30.560 回答
1

如果扩展只是高度并且单击按钮，您可以执行以下操作：

​$('.click-here').click(function() { 
    $('.content').css('height', 'auto');
});​​​​​​​​​​​​​​​

http://jsfiddle.net/nvCvy/3/

于 2012-06-06T13:12:08.293 回答