5

I have been struggling to find my answer. Isthre anyway to set the height 100% in relative positioning?

css

div{
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    position:relative;
    background:red;
}

Fiddle

Shaxrillo
  • 769
  • 1
  • 7
  • 24

3 Answers3

10

See this fiddle

For the height:100% to work in relative positioning, you need to set the height of <html> and <body> also to 100%.

If your <div> is a child div, then you also need to set the height to 100% for the parent <div>s

Add this to your CSS

html,body{
    height:100%;
}
Lal
  • 14,726
  • 4
  • 45
  • 70
6

Straight forward solution would be to add height the parent that is the body as follows .

body,html{
    height:100%;
}

Fiddle

Shanaka
  • 953
  • 2
  • 9
  • 25
1

Yes but the parent container must have its height set to 100% as well. In your fiddle's case it will be the body

This is because the position is relative so you need to ask what is it set relative to. If you set it to 100% it will become 100% of its nearest parent so if you have a parent container that is less than 100% of the body the relative div will not fill the height of the body.

https://jsfiddle.net/247pao7w/

Kinburn101
  • 1,112
  • 2
  • 9
  • 18