{"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[pastacode lang=&#8221;markup&#8221; manual=&#8221;%23child0%20%0A%7B%0A%20%20%20%20height%3A%200%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20background-color%3A%20%23dedede%3B%0A%20%20%20%20-moz-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-webkit-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-o-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20transition%3A%20height%201s%20ease%3B%0A%23parent0%3Ahover%20%23child0%20%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%23child40%20%0A%7B%0A%20%20%20%20height%3A%2040px%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20background-color%3A%20%23dedede%3B%0A%20%20%20%20-moz-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-webkit-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-o-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20transition%3A%20height%201s%20ease%3B%0A%7D%0A%23parent40%3Ahover%20%23child40%20%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%7D%0Ah1%20%0A%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%7D%0A&#8221; message=&#8221;max height code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3Chr%20%2F%3E%0A%3Cdiv%20id%3D%22parent0%22%3E%0A%20%20%20%20%3Ch1%3EHover%20me%20(height%3A%200)%3C%2Fh1%3E%0A%20%20%20%20%3Cdiv%20id%3D%22child0%22%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%0A%3Chr%20%2F%3E%0A%3Cdiv%20id%3D%22parent40%22%3E%0A%20%20%20%20%3Ch1%3EHover%20me%20(height%3A%2040)%3C%2Fh1%3E%0A%20%20%20%20%3Cdiv%20id%3D%22child40%22%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E&#8221; message=&#8221;max height code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;%23menu%20%23list%20%0A%7B%0A%20%20%20%20max-height%3A%200%3B%0A%20%20%20%20transition%3A%20max-height%200.15s%20ease-out%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20background%3A%20%23d5d5d5%3B%0A%7D%0A%23menu%3Ahover%20%23list%20%0A%7B%0A%20%20%20%20max-height%3A%20400px%3B%0A%20%20%20%20transition%3A%20max-height%200.25s%20ease-in%3B%0A%7D%0A%3Cdiv%20id%3D%22menu%22%3E%0A%20%20%20%20%3Ca%3Ehover%20me%3C%2Fa%3E%0A%20%20%20%20%3Cul%20id%3D%22list%22%3E%0A%20%20%20%20%20%20%20%20%3C!&#8211;%20Create%20a%20bunch%2C%20or%20not%20a%20bunch%2C%20of%20li&#8217;s%20to%20see%20the%20timing.%20&#8211;%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3Ca%20href%3D%22%23%22%20id%3D%22trigger%22%3EHover%3C%2Fa%3E%0A%3Cul%20id%3D%22toggled%22%3E%0A%20%20%20%20%3Cli%3EOne%3C%2Fli%3E%0A%20%20%20%20%3Cli%3ETwo%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EThree%3C%2Fli%3E%0A%3Cul%3E%0A&#8221; message=&#8221;text overflow code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li><b>CSS<\/b><\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%23toggled%0A%7B%0A%20%20%20%20max-height%3A%200px%3B%0A%20%20%20%20transition%3A%20max-height%20.8s%20cubic-bezier(0%2C%201%2C%200%2C%201)%20-.1s%3B%0A%7D%0A%23trigger%3Ahover%20%2B%20%23toggled%0A%7B%0A%20%20%20%20max-height%3A%209999px%3B%0A%20%20%20%20transition-timing-function%3A%20cubic-bezier(0.5%2C%200%2C%201%2C%200)%3B%20%0A%20%20%20%20transition-delay%3A%200s%3B%0A%7D%0A&#8221; message=&#8221;css overflow code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;wrap%20%0A%7B%20%0Aoverflow%3Ahidden%3B%20%0A%7D%0A.inner%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A-100%25%3B%0A%20%20%20%20-webkit-transition%3Amargin-top%20500ms%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3Amargin-top%20500ms%3B%0A%7D%0Ainner.open%20%0A%7B%20margin-top%3A0px%3B%20%0A%7D%0A&#8221; message=&#8221;height auto code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li><strong>HTML<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3Cdiv%20class%3D%22wrap%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22inner%22%3ESome%20Cool%20Content%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;height auto code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;div.stretchy%0A%7B%0A%20%20%20%20transition%3A%201s%20linear%3B%0A%7D%0Adiv.stretchy.hidden%0A%7B%0A%20%20%20%20height%3A%201%3B%0A%7D%0Adiv.stretchy.visible%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20min-height%3A40px%3B%0A%20%20%20%20max-height%3A400px%3B%0A%7D%0A&#8221; message=&#8221;window height code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;.sidemenu%20li%20ul%20%0A%7B%0A%20%20%20max-height%3A%200px%3B%0A%20%20%20-webkit-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20-moz-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20-o-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20-ms-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20transition%3A%20all%20.3s%20ease%3B%0A%7D%0A.sidemenu%20li%3Ahover%20ul%20%0A%7B%0A%20%20%20%20max-height%3A%20500px%3B%0A%20%20%20%20-webkit-transition%3A%20all%201s%20ease%3B%0A%20%20%20-moz-transition%3A%20all%201s%20ease%3B%0A%20%20%20-o-transition%3A%20all%201s%20ease%3B%0A%20%20%20-ms-transition%3A%20all%201s%20ease%3B%0A%20%20%20transition%3A%20all%201s%20ease%3B%0A%7D%0A&#8221; message=&#8221;window height code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;div%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20width%3A100%25%3B%0A%20%20bottom%3A1px%3B%0A%20%20left%3A0px%3B%0A%20background%3A%23111%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20max-height%3A100%25%3B%20%2F**%2F%0A%20%20height%3Aauto%3B%20%2F**%2F%0A%0A%20%20-webkit-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20-moz-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20-o-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20-ms-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20transition%3A%20all%200.2s%20ease-in-out%3B%0A%7D%0A.close%20%0A%7B%0A%20%20max-height%3A0%25%3B%20%2F**%2F%0A%7D%0A&#8221; message=&#8221;max height css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;css&#8221; manual=&#8221;div%20%0A%7B%0A%20%20%20%20height%3A%200%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20padding%3A%200%2018px%3B%0A%20%20%20%20-webkit-transition%3A%20all%20.5s%20ease%3B%0A%20%20%20%20%20%20%20-moz-transition%3A%20all%20.5s%20ease%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20all%20.5s%20ease%3B%0A%7D%0Adiv.animated%20%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20padding%3A%2024px%2018px%3B%0A%7D%0A&#8221; message=&#8221;max height css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label>;<\/p>\n<ul>\n<li>Simplified CSS transition height:<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;.our_content%20%0A%7B%0A%09%2F*%20Initially%20we%20don&#8217;t%20want%20any%20height%2C%20and%20we%20want%20the%20contents%20to%20be%20hidden%20*%2F%0A%09max-height%3A%200%3B%0A%09overflow%3A%20hidden%3B%0A%0A%09%2F*%20Set%20our%20transitions%20up.%20*%2F%0A%09-webkit-transition%3A%20max-height%200.8s%3B%0A%09-moz-transition%3A%20max-height%200.8s%3B%0A%09transition%3A%20max-height%200.8s%3B%0A%7D%0A.outside_box%3Ahover%20.our_content%20%0A%7B%0A%09%2F*%20On%20hover%2C%20set%20the%20max-height%20to%20something%20large.%20In%20this%20case%20there&#8217;s%20an%20obvious%20limit.%20*%2F%0A%09max-height%3A%20200px%3B%0A%7D%0A&#8221; message=&#8221;height and width code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(function%20()%20%0A%7B%0A%20%20%20%20%24(%22.paragraph%22).click(function%20()%20%0A%7B%0A%20%20%20%20%20%20%20%20var%20expanded%20%3D%20%24(this).is(%22.expanded%22)%3B%0A%20%20%20%20%20%20%20%20if%20(expanded)%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).transition(%7B%20&#8217;max-height&#8217;%3A%20&#8217;4em&#8217;%2C%20overflow%3A%20&#8217;hidden&#8217;%20%7D%2C%20500%2C%20&#8217;in&#8217;%2C%20function%20()%20%7B%24(this).removeClass(%22expanded%22)%3B%20%7D)%3B%0A%20%7D%20%0A%20%20%20%20%20%20%20%20else%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).transition(%7B%20&#8217;max-height&#8217;%3A%20%24(this).get(0).scrollHeight%2C%20overflow%3A%20&#8221;%7D%2C%20500%2C%20&#8217;out&#8217;%2C%20function%20()%20%0A%7B%20%24(this).addClass(%22expanded%22)%3B%20%7D)%3B%0A%20%7D%0A%20%20%20%20%7D)%3B%0A%7D)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;button&#8217;).bind(&#8216;click&#8217;%2C%20function(e)%20%7B%20%0A%20%20e.preventDefault()%3B%0A%20%20w%20%3D%20%24(&#8216;%23outer&#8217;)%3B%0A%20%20if%20(w.hasClass(&#8216;collapsed&#8217;))%20%7B%0A%20%20%20%20w.css(%7B%20%22max-height%22%3A%20%24(&#8216;%23inner&#8217;).outerHeight()%20%2B%20&#8217;px&#8217;%20%7D)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20w.css(%7B%20%22max-height%22%3A%20%220px%22%20%7D)%3B%0A%20%20%7D%0A%20%20w.toggleClass(&#8216;collapsed&#8217;)%3B%0A%7D)%3B%0A&#8221; message=&#8221;javascript&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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}]}}