[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"snippet-\u002Fsnippets\u002Ffull-height-body":3},{"id":4,"title":5,"body":6,"description":89,"draft":90,"extension":91,"lastModified":92,"meta":93,"navigation":94,"path":95,"seo":96,"stem":97,"tags":27,"__hash__":98},"snippets\u002Fsnippets\u002Ffull-height-body.md","Full Height Page",{"type":7,"value":8,"toc":87},"minimark",[9,22,83],[10,11,12,13,17,18,21],"p",{},"Instead of hacking around ",[14,15,16],"code",{},"min-height: 100vh;"," there's a simpler way to have the\n",[14,19,20],{},"\u003Cbody>"," span full height of the page.",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-css shiki shiki-themes github-dark",":root {\n  display: grid;\n  min-height: 100%;\n}\n","css","",[14,30,31,44,60,77],{"__ignoreMap":28},[32,33,36,40],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"svObZ",":root",[32,41,43],{"class":42},"s95oV"," {\n",[32,45,47,51,54,57],{"class":34,"line":46},2,[32,48,50],{"class":49},"sDLfK","  display",[32,52,53],{"class":42},": ",[32,55,56],{"class":49},"grid",[32,58,59],{"class":42},";\n",[32,61,63,66,68,71,75],{"class":34,"line":62},3,[32,64,65],{"class":49},"  min-height",[32,67,53],{"class":42},[32,69,70],{"class":49},"100",[32,72,74],{"class":73},"snl16","%",[32,76,59],{"class":42},[32,78,80],{"class":34,"line":79},4,[32,81,82],{"class":42},"}\n",[84,85,86],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":28,"searchDepth":46,"depth":46,"links":88},[],"Make the body span the full page height without the min-height 100vh hack. Two CSS lines on the root element, a grid display and min-height 100%, do the whole job.",false,"md","2026-08-29T17:42:32+07:00",{},true,"\u002Fsnippets\u002Ffull-height-body",{"title":5,"description":89},"snippets\u002Ffull-height-body","cCBsSRmwMDC73T0WYaTpXVCdyZgh86zjPBEcaB6UdUg",1788101292473]