CODEWITHSUNDEEP
csshtmlheight
the bosxcz
the bosxcz

Reputation: 91

div height:100% wrap content

why is that my div only color based on its content?which is the height of the button from the code below.the div is only wrapping its content.

my div element is

<div id="test">
 <button>testing</button?
 </div>

and in css

#test{
background-color:#666;
width:100%;
height:100%;
}

i set the height to 100% but it only colors the height of the element which is button.how can i color the whole height of the site?what would be the best way for it?

Upvotes: 1

Views: 5977

Answers (3)

Praveen
Praveen

Reputation: 56509

Yes because the height of the div is occupied by the button.

so always start with below css to cover the browser

body, html {
  width: 100%;
  height: 100%;
}

Upvotes: 0

Shiva Avula
Shiva Avula

Reputation: 1836

If you have to color the whole site you can apply the css directly to body or html tag.

body, html {
    min-height: 100%;
    background-color:#666;
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

To make any element fit for height:100%, HTML and body height should be set to 100%

body, html{  
  height:100%
}

DEMO

Upvotes: 1

Related Questions