滑动Div以自动调高 [英] Sliding Div to auto height

问题描述

我有一个div，可以进出。
为此，我只需将高度每秒增加2px，直到距离高度为0的预设高度为止。

有没有办法确定内容高度作为内容的div是不可预知的高度，考虑div的开始属性是显示：none和height：0？

谢谢。

诀窍是临时显示它，测量高度，然后再隐藏它。

解决方案

如果您使用visibility：hidden和position：absolute，它不会在您执行此操作时更改页面布局。

 函数getElementHeight（EL）
 {
变种样式= {
能见度：el.style.visibility，
高度：el.style.height，
位置：el.style .position，
 display：el.style.display 
}; 
 el.style.visibility =hidden; 
 el.style.height =auto; 
 el.style.position =绝对; 
 el.style.display =block; 
 var height = el.offsetHeight; 
 el.style.display = styles.display; 
 el.style.position = styles.position; 
 el.style.height = styles.height; 
 el.style.visibility = styles.visibility; 
返回高度; 
 
  

如果您想获得样式高度应该是什么，您可以添加这些 var height = el.offsetHeight; ：

  el两行。 style.height = height +px; 
 height + =（height  -  el.offsetHeight）; 
  

I have a div that I slide in and out. To do this I just increase the height by 2px every second until a preset height from a height of 0.

Is there anyway to determine the content height of the div as the content is unpredictible height considering the starting properties of the div are display:none and height:0?

Thank you.

解决方案

The trick is to temporarily show it, measure the height, then hide it again. And if you use visibility: hidden and position: absolute, it won't change the page layout while you do it.

function getElementHeight(el)
{
    var styles = {
        visibility: el.style.visibility,
        height: el.style.height,
        position: el.style.position,
        display: el.style.display
    };
    el.style.visibility = "hidden";
    el.style.height = "auto";
    el.style.position = "absolute";
    el.style.display = "block";
    var height = el.offsetHeight;
    el.style.display = styles.display;
    el.style.position = styles.position;
    el.style.height = styles.height;
    el.style.visibility = styles.visibility;
    return height;
}

If you want to get what the style height should be, you can add these two lines after var height = el.offsetHeight;:

el.style.height = height + "px";
height += (height - el.offsetHeight);

这篇关于滑动Div以自动调高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！