如何以百分比给出div的高度 [英] How to give height to the div in percentage

问题描述

我的HTML代码如下：

I have HTML code as follows:

<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：

Jquery:

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

上面我正在尝试的是，我正在尝试创建标题div，其中包含

1. Comapny Logo

2.项目名称

3.设置徽标



我想给头部div只分配10％的高度。

我可以知道如何只给出10％的高度和我们如何计算使用Javascript分配的百分比高度？



谢谢



从下面的评论中复制的其他信息

上面的CSS：

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:

.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;}

推荐答案

（' #lblProj'）。append（' WBS-MUK Simplyhealth-Upgrade-to-PUL-Staf-在'）;

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

上面我正在尝试的是，我正在尝试创建标题div持有

1. Comapny Logo

2.项目名称

3.设置标志



我想给头部div只分配10％的高度。

我可以知道如何只给出10％的高度以及我们如何计算多少高度百分比使用Javascript分配？



谢谢



从下面的评论中复制的其他信息

上面的CSS：

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:

.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;}

整页的50％不是因为整页只是你的内容有多高。将身体改为100％高度它会起作用。

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.

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

这篇关于如何以百分比给出div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！