如何在css中设置为0px时根据内容计算像素高度？

Question

我给的0px高度的要素如下图所示

#sample{ 
    height: 0px; 
    overflow: hidden; 
    transition-duration: 1.2s; 
} 

<div id="sample"> 
    <h1>Hello World main headinh</h1> 
    <h2>Hello World sub heading</h2> 
    <p>Hello world paragraph</p> 
</div> 

如果我不指定高度，它会采取的含量高（比如50像素）。现在最初我不知道#sample的高度。我想将其高度设置为原来的计算高度（即50px），我可以通过给高度100%来实现。

document.getElementById("sample").style.height = "100%"; 

但transition-duration属性没有在这种情况下工作，所以当我改变到百分之像素所以transition-duration财产运作良好。

document.getElementById("sample").style.height = "50px"; 

但这里的问题是div里面的内容是dyanamic，所以它的高度是不断变化的。

那么我怎样才能给像素所需的#sample像素的高度。 解决方案应该只有Javascript没有任何其他框架，如JQuery。

Answer 1

尝试。当父元素有其高度设置（你不能拥有的东西，一直没有高度集中的百分比）

var element = document.getElementById('sample'); 
element.style.height= element.scrollHeight+"px" 

https://jsfiddle.net/y0g22540/

Answer 2

我想你想要的是

var s = document.getElementById('sample'); 
s.style.height = s.offsetHeight + 'px'; 

附：应该注意offsetHeight包括垂直填充和边框。并四舍五入为整数。
更多的信息在：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Answer 3

你可以使用JS来获取html标签的高度和高度。

var example = document.getElementById("yourTag").offsetHeight; 

然后，你可以这样做：

document.getElementById("sample").style.height = example; 

Answer 4

如果你想动画的高度，你想要做的是通过设置max-height: 0开始出来，然后通过改变过渡的最大高度一个班级，并添加一个过渡或设置动画，这样max-height: 500px或某些值肯定比里面的内容更大。

编辑：这可能不是正是你在做什么，但这里是一个不错的例子：https://davidwalsh.name/css-slide

Answer 5

百分比高度才有效。

但是，您可以使用scrollHeight将height设置回其原始值。

// Get references to the elements: 
 
var btn = document.getElementById("show"); 
 
var sample = document.getElementById("sample"); 
 

 
// Set up an event handler to trigger the code: 
 
btn.addEventListener("click", function(){ 
 
    // Set the height to the height of the element's content: 
 
    sample.style.height = sample.scrollHeight + "px"; 
 
    
 
    // Just for testing purposes: 
 
    console.log(sample.style.height); 
 
});

#sample{ 
 
    height: 0px; 
 
    overflow: hidden; 
 
    transition-duration: 1.2s; 
 
}

<button id="show">Show</button> 
 
<div id="sample"> 
 
    <h1>Hello World main headinh</h1> 
 
    <h2>Hello World sub heading</h2> 
 
    <p>Hello world paragraph</p> 
 
</div>

Answer 6

如果你只是想显示和隐藏收缩或扩张的宽度和高度，然后在这里它是和例子都将指向你在那个方向！

#click:checked ~ #sample{ 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
      transform: scale(1); 
 
} 
 
#sample{ 
 
    overflow: hidden; 
 
    -webkit-transition: transform 0.125s; 
 
     -moz-transition: transform 0.125s; 
 
      transition: transform 0.125s; 
 
    
 
    -webkit-transform: scale(0); 
 
    -moz-transform: scale(0); 
 
      transform: scale(0); 
 
}

<input type="checkbox" id="click"/> 
 
<label for="click"> Click me </label> 
 

 
<div id="sample"> 
 
    <h1>Hello World main headinh</h1> 
 
    <h2>Hello World sub heading</h2> 
 
    <p>Hello world paragraph</p> 
 
</div>

Answer 7

你可以使用DIV中的包装，并读取其高度。

document.getElementById('toggle').onclick = function() { 
 

 
    const sample = document.getElementById("sample"); 
 
    const wrapper = sample.getElementsByClassName('wrapper'); 
 

 
    if (parseInt(sample.style.height) > 0) { 
 
    sample.style.height = 0; 
 

 
    } else { 
 

 
    const style = window.getComputedStyle(wrapper[0], null); 
 
    const height = style.getPropertyValue("height"); 
 

 

 
    sample.style.height = height; 
 

 

 
    } 
 

 

 

 
};

#sample { 
 
    height: 0px; 
 
    overflow: hidden; 
 
    transition-duration: 1.2s; 
 
}

<div id="sample"> 
 
    <div class="wrapper"> 
 
    <h1>Hello World main headinh</h1> 
 
    <h2>Hello World sub heading</h2> 
 
    <p>Hello world paragraph</p> 
 
    </div> 
 
</div> 
 

 
<button id="toggle">Toggle</button>