有没有办法根据内容的大小（可以变化）来扩展div？

我在我们的SharePoint网站上创建了员工聚光灯webpart，随每个页面加载选择一名员工。在聚光灯下的部分是从用户信息列表的“关于我”部分拉出的员工的生物特征。我试图做到这一点，所以生物是可扩展的，以便生物的几行内容可见，然后用户可以点击“更多”链接来扩展文本以阅读其余部分。我有工作，但我有它跳下来一个固定的高度，我宁愿它只是扩展到文本的量与在<div>有没有办法根据内容的大小（可以变化）来扩展div？

股利部分：

<div id=\"expandable\" >" + Employees[randId].aboutMe + 
       "</div><a href=\"javascript:Tog()\">more...</a>

风格：

#expandable { height:55px; overflow:hidden; }

一个简单的脚本扩展：

function Tog() { 
    var expandable = document.getElementById('expandable'); 
    if (expandable.style.height == '400px') { 
     expandable.style.height = '55px'; 
    } 
    else { 
     expandable.style.height = '400px'; 
    } 
}

是否有贝特如何扩展内容并在崩溃时仍显示一些文本？

来源

2012-08-01 Spacemancraig

删除高度和溢出属性，它会自动扩展以适应内容。 – sachleen 2012-08-01 19:13:04

不幸的是，它所做的是在顶部和右侧放置滚动条。我不想发生。 – Spacemancraig 2012-08-01 19:14:30

它有一个固定高度的父容器吗？ – sachleen 2012-08-01 19:16:14

相反高度设定为一个固定值的，只需将其设置为auto，并在div将扩大以适应内容：

function Tog() { 
    var expandable = document.getElementById('expandable'); 
    if (expandable.style.height) { 
     expandable.style.height = ''; 
    } else { 
     expandable.style.height = 'auto'; 
    } 
}

（ Demo at jsfiddle.net）。

UPDATE：也可以考虑用适当的事件监听器更换你的网线JS（href="javascript:Tog()"），为suggested by Bergi。

来源

2012-08-01 19:23:46 bfavaretto

我会把它设置为一个空值而不是''55px“'，那么来自样式表的值将适用。但+1'自动' – Bergi 2012-08-01 19:32:23

@Bergi，如果我这样做，然后当他们再次点击更多的链接崩溃，它仍然会倒回到'55px'？ – Spacemancraig 2012-08-01 19:49:03

是的 - 看小提琴。 – Bergi 2012-08-01 19:51:35

这是我在评论中所说的working example。默认情况下，div会占用其内容所需的任何空间。您可以通过将short类添加到元素来将其限制为您的尺寸。切换功能只是添加和删除这个类。

HTML

<div id="expandable" class="short">Content here</div> 
<a href="#" onclick="toggle()">more...</a>

CSS

.short { 
    height: 200px; 
    overflow: hidden; 
}

function toggle() { 
    var elem = document.getElementById("expandable"); 

    if(hasClass(elem, "short")) 
    removeClass(elem, "short"); 
    else 
    elem.className = elem.className + " short"; 
} 

//These functions from http://stackoverflow.com/a/2155755/219118 
function hasClass(ele,cls) { 
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 

function removeClass(ele,cls) { 
    if (hasClass(ele,cls)) { 
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
    ele.className=ele.className.replace(reg,' '); 
    } 
}

来源

2012-08-01 19:22:36 sachleen

不要设置一个高度，使整个内容可以显示出来，而不是删除类具有最大高度/溢出设置。

HTML

<div id="content" class="collapsed"> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
    <p>5</p> 
    <p>6</p> 
    <p>7</p> 
    <p>8</p> 
    <p>9</p> 
    <p>10</p> 
</div>

CSS

div#content{ border: 1px solid black; cursor: pointer;} 

div.collapsed{ 
    max-height: 40px; 
    overflow:hidden; 
}

的JavaScript

var cont = document.getElementById("content"); 
cont.onclick = function() { 
    var newClass = (cont.className==="collapsed") ? "" : "collapsed"; 
    cont.className = newClass;   
};

的JavaScript是一个基本的例子，最好使用添加/删除类库，以便可以有多个类。

例

JSFiddle

来源

2012-08-01 19:22:52 epascarello

有没有办法根据内容的大小（可以变化）来扩展div？

回答

相关问题