{"id":785,"date":"2015-03-19T12:41:56","date_gmt":"2015-03-19T12:41:56","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=785"},"modified":"2015-03-24T02:42:45","modified_gmt":"2015-03-24T02:42:45","slug":"autofit-div-variant","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=785","title":{"rendered":"autofit div variant"},"content":{"rendered":"<blockquote><p>Goal: to find a good way to create an autofit div<\/p><\/blockquote>\n<p>How can I use a divs to fill spaces like panels in the desktop applications?<\/p>\n<p><strong>1. css calc()<\/strong><br \/>\nThis is brilliant but maybe dangerous because of the browsers.<\/p>\n<pre data-enlighter-language=\"css\" class=\"EnlighterJSRAW\">\r\n.container {\r\n  height: 100%;\r\n}\r\n.div1 {\r\n  height: 24px;\r\n}\r\n.div2{\r\n  height: calc(100% - 24px);  \/* Subtract the div1 size *\/\r\n  overflow: auto;\r\n}\r\n<\/pre>\n<p><strong>2. content shifting with padding<\/strong><\/p>\n<pre data-enlighter-language=\"css\" class=\"EnlighterJSRAW\">\r\n.container {\r\n  height: 100%;\r\n}\r\n.div1 {\r\n  height: 24px;\r\n}\r\n.div2{\r\n  padding-top: 24px;\r\n  \/* padding and border included in the width and height *\/\r\n -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  height: 100%;\r\n  min-height: 50px; \/* don't forget the padding! *\/\r\n  overflow: auto;\r\n}\r\n<\/pre>\n<p><strong>3. stretched sail &#8211; div glued to the edges<\/strong><br \/>\nThis way is similar to the desktop solution.<\/p>\n<pre data-enlighter-language=\"css\" class=\"EnlighterJSRAW\">\r\n.container {\r\n  height: 100%;\r\n}\r\n.div1 {\r\n  height: 24px;\r\n}\r\n.div2{\r\n  \/* like a stretched sail *\/\r\n  position: absolute;\r\n  top: 24px;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Goal: to find a good way to create an autofit div How can I use a divs to fill spaces like panels in the desktop applications? 1. css calc() This is brilliant but maybe dangerous because of the browsers. 2. content shifting with padding 3. stretched sail &#8211; div glued to the edges This way [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-785","post","type-post","status-publish","format-standard","hentry","category-web-trick"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=785"}],"version-history":[{"count":1,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/785\/revisions"}],"predecessor-version":[{"id":786,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/785\/revisions\/786"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}