Floating element with 100% height

Question

I have a element (represented as aside) that I need to span the full height of the page. However, the height is appearing to be ineffective with "height 100%".

Here is the fiddle: http://jsfiddle.net/h18ctmfq/

aside{
        width:300px;
        float:left;
        background-color:#808080;
        height:100%;
    }

possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Paulie_D, Oct 27 '14 at 15:25

score 2 · Accepted Answer · answered Oct 27 '14 at 15:20

2

Add this

html {
    height: 100%;
}

JSiddle Demo

answered Oct 27 '14 at 15:20

Paulie_D

107,962
13
142
161

I was just answering that :P +1 – Goos van den Bekerom Oct 27 '14 at 15:21
I've actually never used HTML as a selector before, that worked in the fiddle but not in my actual file. Is it just height, and width I would declare in both the HTML and Body tags? – user3576711 Oct 27 '14 at 15:22
@user3576711 Then it seems likely something else is affecting the element. We need more info if that is the case. – Paulie_D Oct 27 '14 at 15:24
1

Should start closing these questions as dupes – Patsy Issa Oct 27 '14 at 15:24
1

For the `height: 100%;` to actually work, it requires your element's parent to have a fixed height as well (px or %) – Antoine Combes Oct 27 '14 at 15:24
Noted, tagged as such. – Paulie_D Oct 27 '14 at 15:25
Got it sorted now, this answer was correct. Thanks for all the help! – user3576711 Oct 27 '14 at 15:25

Floating element with 100% height

1 Answers1