{"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 <ul> slide down using CSS transitions.<\/li>\n<li>The <ul> 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=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dmax height code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dmax height code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201d%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!\u2013%20Create%20a%20bunch%2C%20or%20not%20a%20bunch%2C%20of%20li\u2019s%20to%20see%20the%20timing.%20\u2013%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dtext overflow code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><b>CSS<\/b><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dcss overflow code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label>;<\/p>\n<ul>\n<li>Using relative positioning and works on li elements, & is pure CSS<\/li>\n<\/ul>\n<ul>\n<li><b>CSS<\/b><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dwrap%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\u201d message=\u201dheight auto code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><strong>HTML<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dheight auto code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201ddiv.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\u201d message=\u201dwindow height code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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=\u201dcss\u201d manual=\u201d.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\u201d message=\u201dwindow height code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201ddiv%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\u201d message=\u201dmax height css code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201ddiv%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\u201d message=\u201dmax height css code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201d.our_content%20%0A%7B%0A%09%2F*%20Initially%20we%20don\u2019t%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\u2019s%20an%20obvious%20limit.%20*%2F%0A%09max-height%3A%20200px%3B%0A%7D%0A\u201d message=\u201dheight and width code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label>;<\/p>\n<p>Transition height using Jquery:<\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%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\u2019max-height\u2019%3A%20\u20194em\u2019%2C%20overflow%3A%20\u2019hidden\u2019%20%7D%2C%20500%2C%20\u2019in\u2019%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\u2019max-height\u2019%3A%20%24(this).get(0).scrollHeight%2C%20overflow%3A%20\u201d%7D%2C%20500%2C%20\u2019out\u2019%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\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201d%24(\u2018button\u2019).bind(\u2018click\u2019%2C%20function(e)%20%7B%20%0A%20%20e.preventDefault()%3B%0A%20%20w%20%3D%20%24(\u2018%23outer\u2019)%3B%0A%20%20if%20(w.hasClass(\u2018collapsed\u2019))%20%7B%0A%20%20%20%20w.css(%7B%20%22max-height%22%3A%20%24(\u2018%23inner\u2019).outerHeight()%20%2B%20\u2019px\u2019%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(\u2018collapsed\u2019)%3B%0A%7D)%3B%0A\u201d message=\u201djavascript\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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 slide down using CSS transitions. The 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: 0;, and [&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}]}}