How to give height to the div in percentage

Question

0.00/5 (No votes)

See more:

I have HTML code as follows:

HTML

<div class="displayBlock horizontalCenter heightTenPerc" data-role="header" style="height:10%;">
            <div class="divLogo1 floatLeft borderRed">
                <img src="Logo.jpg"  width="24%" alt="Mastek" />
            </div>
            <div class="projName1 horizontalCenter heightTenPerc" id="lblProj" >
            </div>
            <div class="divSetting1 floatRight ">
                <img id="imgSetting" style="cursor: pointer;" src="setting-logo.jpg"  width="15%" alt="Setting" /> 
            </div>
            <div class="clear"></div>
        </div>

Jquery:

JavaScript

$('#lblProj').append('WBS-MUK Simplyhealth-Upgrade-To-PUL-Staf-On');

What I'm trying above is, I'm trying to create header div which holds
1. Comapny Logo
2. Project Name
3. Setting Logo

I want to give the assign only 10% of the height to the header div.
May I know how to give only 10% height and how we can calculate how much height in percentage has been allocated using Javascript?

Thanks

additional information copied from comment below
CSS for above:

CSS

.divLogo1{width:10%;}
.divSetting1{width:10%;text-align:right;}
.projName1{width:75%;color:Black;display:inline-block;margin:0 auto;}
.displayBlock{display:block;}
.heightTenPerc{height:10%;}
.floatRight{float: right;}
.floatLeft{float: left;}
.divHalf{width: 49%;}
.borderRed{border:1px solid red;}
.horizontalCenter{text-align:center;}

Posted 17-Nov-13 22:19pm

dhage.prashant01

Updated 17-Nov-13 23:10pm

Nelek

v2

Add a Solution

Comments

dhage.prashant01 18-Nov-13 4:27am

CSS for above:

.divLogo1{width:10%;}
.divSetting1{width:10%;text-align:right;}
.projName1{width:75%;color:Black;display:inline-block;margin:0 auto;}
.displayBlock{display:block;}
.heightTenPerc{height:10%;}
.floatRight{float: right;}
.floatLeft{float: left;}
.divHalf{width: 49%;}
.borderRed{border:1px solid red;}
.horizontalCenter{text-align:center;}

W∴ Balboos, GHB 18-Nov-13 8:34am

I stopped using % sizing. Items that were viewed on a local client were fine - and those on the same screen, through a thin client, were often unpredictably messed up. Much as I liked the idea of the scaling supplied by '%', its reliance on knowing the window dimensions can fail. (This was both IE & FireFox).

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)

Alexanbu · Answer 1 · 2013-11-19T02:07:00

Solution 1

It doesn't take the 50% of the whole page is because the "whole page" is only how tall your contents are. Change the body to 100% height and it will work.

C#

html, body{
    height: 100%;
}
div{
    height: 50%;
}

Posted 19-Nov-13 2:07am

Alexanbu