当前位置: 动力学知识库 > 问答 > 编程问答 >

css - How to assign percentage values to div to divide entire page into 3 parts with body height = window's height

问题描述:

I want to create 3 div such that the entire page is of the size of the window( i.e the page should not scroll) and each div should have height as of some percent of the entire height.

e.g

|--------------------------------------|

| Body height=window's height |

| |----------------------------------| |

| | Header height:10% | |

| |----------------------------------| |

| | | |

| | Content height:85% | |

| | | |

| | | |

| |----------------------------------| |

| | Footer height:5 % | |

| |----------------------------------| |

|--------------------------------------|

Here is the code which I used without any success

<body style="width: 100%; height:100%">

<div style="width: 100%; height:100%;">

<div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">

<!-- some content -->

</div>

<div style="width: 100%; height:85%;" >

<!-- some content -->

</div>

<div style="width: 100%; height:5%" >

<!-- some content -->

</div>

</div>

</body>

网友答案:

Do you need something like this?

Demo

html, body {
    height: 100%;
}

div:nth-of-type(1) {
    background: #f00;
    height: 20%;
}

div:nth-of-type(2) {
    background: #00f;
    height: 70%;
}

div:nth-of-type(3) {
    background: #0f0;
    height: 10%;
}

I guess your solution will also work, but you must have missed out resetting default browser styles, use this in your CSS and you've missed out setting height: 100%; for html element too

* {
   margin: 0;
   padding: 0;
}
网友答案:

Try to change the height value to PX:


<body style="width: 100%; height:100%">
<div style="width: 100%; height:1000px;">
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
        <!-- some content -->
    </div>
    <div style="width: 100%; height:85%;"   >
        <!-- some content -->
    </div>
    <div style="width: 100%; height:5%"  >
        <!-- some content -->
    </div>
</div>
</body>
分享给朋友:
您可能感兴趣的文章:
随机阅读: