Make div fixed height by percent

Question

I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).

I set height: 10% but it still didn't solve my problem.

Here is my css:

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.header {
    display: inline-block;
    background-color: #008CDA;
    width: 100%;
    height: 10%;
    margin: 0px auto;
    padding: 0px;
}

Please provide a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve). — timolawl, May 07 '16 at 06:46

score 1 · Answer 1 · answered May 07 '16 at 06:48

1

Here's a quick JSfiddle showing a parent-child layed out as you describe: https://jsfiddle.net/k0jur7yf/

{.child {
  height:10%;
  width:100%;
  background-color: red;
}

Could you show us a snippet of your code if this doesn't solve your problem?

answered May 07 '16 at 06:48

Miguel Boland

41
5

Yes! i want it exact to be like that but mine is depend on the long of the content inside it :(. If there is no content in the div, it's blank :( – tuankhoa1996 May 07 '16 at 06:53
You can avoid displaying the part of the content outside your div using `overflow: hidden` in your child class (https://jsfiddle.net/k0jur7yf/1/), does this help? – Miguel Boland May 07 '16 at 06:56
the problem fixed by set html height to 100%. I only set the body. Thank you so much for response! :) – tuankhoa1996 May 07 '16 at 06:57

score 1 · Accepted Answer · edited May 07 '16 at 06:56

1

All his parent must have height: 100%.

usually it looks like this:

html,
body {
  height: 100%;
  background-color:grey;
}
.wrap {
  height: 100%;
  background-color:yellow;
}
.your_div {
  height: 10%;
  background-color:red;
}

<div class="wrap">
  <div class="your_div"></div>
</div>

edited May 07 '16 at 06:56

Ani Menon

27,209
16
105
126

answered May 07 '16 at 06:49

inomdzhon

38
6

1

This fixed my problem, i forgot the html height! Thank you so much! – tuankhoa1996 May 07 '16 at 06:55
@tuankhoa1996 you welcome – inomdzhon May 07 '16 at 07:00

score 0 · Answer 3 · answered May 07 '16 at 07:05

0

Check it, first make a div and its class parent. enter image description here Added the following class in your Css file or in head. .parent {height:10%; width:100%;}

answered May 07 '16 at 07:05

kamaljeet

9
2

score 0 · Answer 4 · edited May 07 '16 at 07:30

0

In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height. example:

<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>

<div style="width:100px;height:10px:border:3px solid red">

edited May 07 '16 at 07:30

KittMedia

7,368
13
34
38

answered May 07 '16 at 07:28

G Parveen

1
1

Make div fixed height by percent

4 Answers4