CODEWITHSUNDEEP
htmlcssheight
Flezcano
Flezcano

Reputation: 1687

Height percentage not working in CSS

I am trying to use height property using percentages, but it doesn't work. I want to use percentage so it looks fine in any resolution. 

<div id="bloque_1" style="height: 80%;background: red">   
</div>

How can I make it work?

Upvotes: 14

Views: 55370

Answers (4)

swapnesh
swapnesh

Reputation: 26722

Apply 100% height on your parent element

HTML code- 

<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">   
</div>
</body>
</html>

CSS Part-

html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }

Working Fiddle - http://jsfiddle.net/SEafD/1/

Upvotes: 2

Rajender Joshi
Rajender Joshi

Reputation: 4205

Demo

html,body{
    height:100%
}
#bloque_1{
    background:red;
    height:80%;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157284

When you are using % for width, or height, the 1st question you should ask is that 80% of what? So you also need to apply height to the parent element, so assuming that this element of yours is inside the body tag, you need to use this in your CSS

html, body {
   height: 100%;
}

So now your div element will be 80% of 100%

Demo

Side Note: Also when you are dealing with absolute positioned elements, you may come across a scenario where your div won't exceed the current viewport height, so in that case you need to have min-height

Upvotes: 41

designosis
designosis

Reputation: 5263

Everything outside of bloque_1 will need a height as well, or you'll get 80% of 0. You may also have to apply a height of 100% to the body.

Here's a jsfiddle that shows it in action.

Upvotes: 5

Related Questions