如何在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>