{"id":3026,"date":"2016-12-26T09:24:18","date_gmt":"2016-12-26T15:24:18","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2043"},"modified":"2016-12-26T09:24:18","modified_gmt":"2016-12-26T15:24:18","slug":"how-to-give-an-element-the-height-of-the-window","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-give-an-element-the-height-of-the-window\/","title":{"rendered":"How to Give an Element the Height of the Window"},"content":{"rendered":"

Setting the width of an element to the full window height is done pretty commonly, but it’s a lot more rare for an element to be given the full\u00a0height<\/em> of a window. The strategy behind stretching an element to the full height of the window is essentially the same as stretching an element to the full width. In both of these instances, the element will only be able to be as wide or as long as it’s container element, so you have to first make sure that all of the parent elements take up the entire width or height of the window before you can apply the height: 100% to your targeted element.<\/p>\n

So for example, let’s say you have a div called .container that you want to have take up the entire height of the window. First, you’ll need to make the html, body, and any other parent elements of .container have a height of 100%:<\/p>\n

html,\u00a0<\/code>body {<\/pre>\n
\u00a0\u00a0<\/code>height: 100%;<\/code><\/pre>\n
}<\/pre>\n
From there it should be easy to stretch the height of all your remaining parent divs until you get to .container:<\/p>\n
container{\n\u00a0 \u00a0height: 100%;\n}<\/pre>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Setting the width of an element to the full window height is done pretty commonly, but it’s a lot more rare for an element to be given the full\u00a0height of a window. The strategy behind stretching an element to the […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3026"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3026"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3026\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}