{"id":369,"date":"2017-03-14T13:48:02","date_gmt":"2017-03-14T13:48:02","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=369"},"modified":"2017-03-29T17:53:20","modified_gmt":"2017-03-29T12:23:20","slug":"how-transit-height-0-height-auto-using-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-transit-height-0-height-auto-using-css\/","title":{"rendered":"[10 solved Answers] How to transit height: 0; to height: auto; using CSS"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<ul>\n<li>When we try to make a &lt;ul&gt; slide down using CSS transitions.<\/li>\n<li>The &lt;ul&gt; starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,<\/li>\n<li>If we do this from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.<\/li>\n<\/ul>\n<p>How could we do this without using JavaScript?<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">max height code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">#child0 <br\/>{<br\/>    height: 0;<br\/>    overflow: hidden;<br\/>    background-color: #dedede;<br\/>    -moz-transition: height 1s ease;<br\/>    -webkit-transition: height 1s ease;<br\/>    -o-transition: height 1s ease;<br\/>    transition: height 1s ease;<br\/>#parent0:hover #child0 <br\/>{<br\/>    height: auto;<br\/>#child40 <br\/>{<br\/>    height: 40px;<br\/>    overflow: hidden;<br\/>    background-color: #dedede;<br\/>    -moz-transition: height 1s ease;<br\/>    -webkit-transition: height 1s ease;<br\/>    -o-transition: height 1s ease;<br\/>    transition: height 1s ease;<br\/>}<br\/>#parent40:hover #child40 <br\/>{<br\/>    height: auto;<br\/>}<br\/>h1 <br\/>{<br\/>    font-weight: bold;<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>The only difference between the two snippets of CSS is one has height: 0, the other height: 40.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">max height code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;hr \/&gt;<br\/>&lt;div id=&quot;parent0&quot;&gt;<br\/>    &lt;h1&gt;Hover me (height: 0)&lt;\/h1&gt;<br\/>    &lt;div id=&quot;child0&quot;&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;&lt;\/div&gt;&lt;\/div&gt;<br\/>&lt;hr \/&gt;<br\/>&lt;div id=&quot;parent40&quot;&gt;<br\/>    &lt;h1&gt;Hover me (height: 40)&lt;\/h1&gt;<br\/>    &lt;div id=&quot;child40&quot;&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;Some content<br\/>        &lt;br \/&gt;<br\/>    &lt;\/div&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>Use max-height in the transformation and not height. And set a value on max-height<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#menu #list <br\/>{<br\/>    max-height: 0;<br\/>    transition: max-height 0.15s ease-out;<br\/>    overflow: hidden;<br\/>    background: #d5d5d5;<br\/>}<br\/>#menu:hover #list <br\/>{<br\/>    max-height: 400px;<br\/>    transition: max-height 0.25s ease-in;<br\/>}<br\/>&lt;div id=&quot;menu&quot;&gt;<br\/>    &lt;a&gt;hover me&lt;\/a&gt;<br\/>    &lt;ul id=&quot;list&quot;&gt;<br\/>        &lt;!-- Create a bunch, or not a bunch, of li&#039;s to see the timing. --&gt;<br\/>        &lt;li&gt;item&lt;\/li&gt;<br\/>        &lt;li&gt;item&lt;\/li&gt;<br\/>        &lt;li&gt;item&lt;\/li&gt;<br\/>        &lt;li&gt;item&lt;\/li&gt;<br\/>        &lt;li&gt;item&lt;\/li&gt;<br\/>    &lt;\/ul&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Use max-height with different transition<\/li>\n<\/ul>\n<ul>\n<li><strong>HTML<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">text overflow code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;a href=&quot;#&quot; id=&quot;trigger&quot;&gt;Hover&lt;\/a&gt;<br\/>&lt;ul id=&quot;toggled&quot;&gt;<br\/>    &lt;li&gt;One&lt;\/li&gt;<br\/>    &lt;li&gt;Two&lt;\/li&gt;<br\/>    &lt;li&gt;Three&lt;\/li&gt;<br\/>&lt;ul&gt;<\/code><\/pre> <\/div>\n<ul>\n<li><b>CSS<\/b><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css overflow code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#toggled<br\/>{<br\/>    max-height: 0px;<br\/>    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;<br\/>}<br\/>#trigger:hover + #toggled<br\/>{<br\/>    max-height: 9999px;<br\/>    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); <br\/>    transition-delay: 0s;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label>;<\/p>\n<ul>\n<li>Using relative positioning and works on li elements, &amp; is pure CSS<\/li>\n<\/ul>\n<ul>\n<li><b>CSS<\/b><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">height auto code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">wrap <br\/>{ <br\/>overflow:hidden; <br\/>}<br\/>.inner <br\/>{<br\/>            margin-top:-100%;<br\/>    -webkit-transition:margin-top 500ms;<br\/>            transition:margin-top 500ms;<br\/>}<br\/>inner.open <br\/>{ margin-top:0px; <br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li><strong>HTML<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">height auto code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;wrap&quot;&gt;<br\/>    &lt;div class=&quot;inner&quot;&gt;Some Cool Content&lt;\/div&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label>;<\/p>\n<ul>\n<li>Transition from height:0 to height:auto<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">window height code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div.stretchy<br\/>{<br\/>    transition: 1s linear;<br\/>}<br\/>div.stretchy.hidden<br\/>{<br\/>    height: 1;<br\/>}<br\/>div.stretchy.visible<br\/>{<br\/>    height: auto;<br\/>    min-height:40px;<br\/>    max-height:400px;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label>;<\/p>\n<ul>\n<li>transition max height value:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">window height code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.sidemenu li ul <br\/>{<br\/>   max-height: 0px;<br\/>   -webkit-transition: all .3s ease;<br\/>   -moz-transition: all .3s ease;<br\/>   -o-transition: all .3s ease;<br\/>   -ms-transition: all .3s ease;<br\/>   transition: all .3s ease;<br\/>}<br\/>.sidemenu li:hover ul <br\/>{<br\/>    max-height: 500px;<br\/>    -webkit-transition: all 1s ease;<br\/>   -moz-transition: all 1s ease;<br\/>   -o-transition: all 1s ease;<br\/>   -ms-transition: all 1s ease;<br\/>   transition: all 1s ease;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label>;<\/p>\n<ul>\n<li>Set the height to auto and transition the max-height.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">max height css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div <br\/>{<br\/>  position: absolute;<br\/>  width:100%;<br\/>  bottom:1px;<br\/>  left:0px;<br\/> background:#111;<br\/>  color: #FFF;<br\/>  max-height:100%; \/**\/<br\/>  height:auto; \/**\/<br\/><br\/>  -webkit-transition: all 0.2s ease-in-out;<br\/>  -moz-transition: all 0.2s ease-in-out;<br\/>  -o-transition: all 0.2s ease-in-out;<br\/>  -ms-transition: all 0.2s ease-in-out;<br\/>  transition: all 0.2s ease-in-out;<br\/>}<br\/>.close <br\/>{<br\/>  max-height:0%; \/**\/<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 7:<\/label>;<\/p>\n<ul>\n<li>A visual workaround to animating height using CSS3 transitions is to animate the padding instead, and to set explicitly height\/max-height<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">max height css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div <br\/>{<br\/>    height: 0;<br\/>    overflow: hidden;<br\/>    padding: 0 18px;<br\/>    -webkit-transition: all .5s ease;<br\/>       -moz-transition: all .5s ease;<br\/>            transition: all .5s ease;<br\/>}<br\/>div.animated <br\/>{<br\/>    height: auto;<br\/>    padding: 24px 18px;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label>;<\/p>\n<ul>\n<li>Simplified CSS transition height:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">height and width code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.our_content <br\/>{<br\/>\t\/* Initially we don&#039;t want any height, and we want the contents to be hidden *\/<br\/>\tmax-height: 0;<br\/>\toverflow: hidden;<br\/><br\/>\t\/* Set our transitions up. *\/<br\/>\t-webkit-transition: max-height 0.8s;<br\/>\t-moz-transition: max-height 0.8s;<br\/>\ttransition: max-height 0.8s;<br\/>}<br\/>.outside_box:hover .our_content <br\/>{<br\/>\t\/* On hover, set the max-height to something large. In this case there&#039;s an obvious limit. *\/<br\/>\tmax-height: 200px;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label>;<\/p>\n<p>Transition height using Jquery:<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(function () <br\/>{<br\/>    $(&quot;.paragraph&quot;).click(function () <br\/>{<br\/>        var expanded = $(this).is(&quot;.expanded&quot;);<br\/>        if (expanded) <br\/>{<br\/>            $(this).transition({ &#039;max-height&#039;: &#039;4em&#039;, overflow: &#039;hidden&#039; }, 500, &#039;in&#039;, function () {$(this).removeClass(&quot;expanded&quot;); });<br\/> } <br\/>        else <br\/>{<br\/>            $(this).transition({ &#039;max-height&#039;: $(this).get(0).scrollHeight, overflow: &#039;&#039;}, 500, &#039;out&#039;, function () <br\/>{ $(this).addClass(&quot;expanded&quot;); });<br\/> }<br\/>    });<br\/>});<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 10:<\/label>;<\/p>\n<ul>\n<li>Calculate the max height by getting the height of the inner div using JQuery<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;button&#039;).bind(&#039;click&#039;, function(e) { <br\/>  e.preventDefault();<br\/>  w = $(&#039;#outer&#039;);<br\/>  if (w.hasClass(&#039;collapsed&#039;)) {<br\/>    w.css({ &quot;max-height&quot;: $(&#039;#inner&#039;).outerHeight() + &#039;px&#039; });<br\/>  } else {<br\/>    w.css({ &quot;max-height&quot;: &quot;0px&quot; });<br\/>  }<br\/>  w.toggleClass(&#039;collapsed&#039;);<br\/>});<\/code><\/pre> <\/div>\n<ul>\n<li>This article provides some of the basic informations on width , max height , window height , height , height auto , how to make height , how to height , css overflow , overflow hidden , min height , window height , overflow auto , max height , text overflow , height , the heights , overflow , height auto , how to make height.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM When we try to make a &lt;ul&gt; slide down using CSS transitions. The &lt;ul&gt; starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition, If we do this from height: 40px; to height: auto;, then it will slide up to height: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[732,746,750,734,740,737,739,748,747,1356,745,749,730,738,744,743,1352,1353,735,1355,1354,741,751,1309,742,1358,1362,1359,1357,733,1360,1361,731,736,1351],"class_list":["post-369","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-animate-height-with-css-transitions","tag-animate-height-auto-jquery","tag-animate-height-jquery","tag-animating-max-height-to-overcome-heightauto-limitation","tag-css-transition-height-not-working","tag-css-animate-fromto-auto","tag-css-animate-height-change","tag-css-animate-height-when-content-changes","tag-css-height-transition-not-working","tag-css-overflow","tag-css-transition-max-height","tag-css-transition-max-height-delay","tag-css3-transition-height-0-to-auto","tag-css3-transitions","tag-dynamic-max-height-plugin-for-jquery","tag-flexible-height-div-with-max-height-html-css","tag-height","tag-height-auto","tag-how-to-animate-height","tag-how-to-height","tag-how-to-make-height","tag-html-css3-height-transition-not-working","tag-max-height-auto","tag-max-height-read-more-httpwww-wikitechy-comtechnologyhow-transit-height-0-height-auto-using-css","tag-max-height","tag-min-height","tag-overflow","tag-overflow-auto","tag-overflow-hidden","tag-solved","tag-text-overflow","tag-the-heights","tag-the-holy-grail-of-css-animation","tag-when-element-heght-is-not-fixed","tag-window-height"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=369"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/369\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}