Как рассчитать высоту в пикселе в соответствии с содержимым, если оно установлено как 0px в css?

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> 

Если бы я не указано высоту так, он будет принимать высоту контента (скажем 50px). Теперь изначально я не знаю высоту #sample. Я хочу установить его высоту в исходную расчетную высоту (т. Е. 50 пикселей), я могу сделать это, указав высоту 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'; 

P.S. Следует отметить, что 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 или некоторое значение, которое определенно больше, чем содержимое внутри.

EDIT: Это не может быть именно то, что вы делаете, но здесь это достойный пример: https://davidwalsh.name/css-slide

Answer 5

высота в процентах будет работать только тогда, когда родительский элемент был установлен его высота (вы не можете иметь процент от чего-то, что не имел свой набор высоты).

Однако, вы можете установить height обратно к исходному значению, используя scrollHeight.

// 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>