CODEWITHSUNDEEP
htmlcssheight
Steven_Harris_
Steven_Harris_

Reputation: 1121

height 100% understanding how to use it

Ok really simple question, I want to make a section 100% height of the viewport, I understand that the parent element needs to have a defined height but it still doesn't work for me. Help me understand if I'm overlooking something! 

html { 
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
} 

section {
  width: 100%;
  height: 100%;
  background:red;
}

http://jsfiddle.net/SzBM5/

Upvotes: 0

Views: 139

Answers (4)

Patrick Leijser
Patrick Leijser

Reputation: 311

You have to set the height 100% at the BODY and the HTML.

body, html {
   height: 100%;
}

http://jsfiddle.net/pGa6t/

Upvotes: 1

Love Trivedi
Love Trivedi

Reputation: 4046

Use This Css DEMO HERE

html, body {
    margin: 0px;
    padding: 0px;
    height:100%;
} 

section {
    width: 100%;
    height: 100%;
    background:red;
}

Upvotes: 0

Nikhil Patel
Nikhil Patel

Reputation: 1781

Your need to set height:100% for body also.

Fiddle

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

use html, body{ height: 100%; }

demo

Upvotes: 4

Related Questions