How Can I Use Percentage For Contaning Div

Question

1.08/5 (4 votes)

See more:

dear friends

see this code

HTML:

<html>
<body>
<div id="container">
   <div id="halfOfContainer">
  </div>
</div>
</body>
</html>

how can i use percentage in css code for "halfOfContainer" div for height?

CSS:

#halfOfContainer{
    height:50%
}

i wanna use 50% height of "container" div
but this css is not working

please help me :)

Posted 8-Jul-15 0:23am

abtin233

Updated 8-Jul-15 0:24am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suvendu Shekhar Giri · Answer 1 · 2015-07-08T00:42:00

Solution 1

50% of what?
It should work only if you have set a height for the parent DIV also.

Try this-

CSS

#container{
    height:500px;
}
#halfOfContainer{
    height:50%;
}

If you don't want to set fixed height for you parent div then try this-

CSS

html,body{
    height: 100%;
}
#container{
    height:100%;
    /*background-color:red; added for visibility*/
    /*padding:10px; added to view the red border*/
}
#halfOfContainer{
    height:50%;
    /*background-color:blue; added for visibility*/
}

Check this demo at jsfiddle[^]

Hope it helps :)

Posted 8-Jul-15 0:42am

Suvendu Shekhar Giri

Updated 8-Jul-15 1:21am

v5

Comments

Thanks7872 8-Jul-15 9:07am

Don't post solutions to reposted questions.

Suvendu Shekhar Giri 8-Jul-15 9:40am

Yes, But I haven't posted a duplicate solution.
I can bet, the deleted question is not the duplicate question of this question.
In the other question user forgot to put a '#' while declaring the CSS id. I don't have the priviledge to view the deleted question but if you have then please check.

Anyway, will keep your suggestion in mind for sure. Thanks :)

abtin233 8-Jul-15 13:10pm

50% of container not 50% of body.....
??

Suvendu Shekhar Giri 8-Jul-15 13:24pm

...and what is the height of container?

abtin233 9-Jul-15 7:39am

if container is 500 px , 50% of container is 250px
and if container is 100 px ,50 % of container is 100px

Suvendu Shekhar Giri 9-Jul-15 8:49am

Yes. It should work. Is this behaving differently?
Have you checked the shared jsfiddle