Question

当内容中包含大量内容时，如何扩展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显示所有内容吗？

Answer 1

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

请勿提及高度，即删除height属性。
删除Overflow:hidden;

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

Answer 2

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

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

Answer 3

如果扩展只是高度，只需点击按钮即可：

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

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

根据内容溢出扩展div或UL

3 个答案: