What does % height in css mean

Question

I have a div whose child p tag contains text.

I want the p tag to only be 70% in height.

This works, it is only 70% of the parent's height. I then use "overflow: hidden;" on the p tag to hide the extra content.

Then I thought I could just add 15% margin-top or add 15% padding-top (to the parent) to vertically center the p tag in the parent div... but I find I need to set it to something like 3%.... how come?

what are you trying to achieve? There seems to be so many conflicting ideas here, making it hard to decide what you're looking for. — jbutler483, Jan 19 '15 at 11:17

web-tiki · Accepted Answer · 2015-01-19T12:26:43.710

2

Then I thought I could just add 15% margin-top or add 15% padding-top (to the parent) to vertically center the p tag in the div... but I find I need to set it to something like 3%.... how come?

Because percent margins and paddings (top, right, bottom and left) are calculated according to the containing blocks width.

Top and bottom margins aren't calculated according to the parent's height so that is why 15% margin-top isn't 15% of the container height but 15% of container width.

Workaround :

You may use absolute or relative positioning as the parent has a fixed height and the top value in percent is calculated according to the parent's height so top:15%; will be 15% of the parent's height.

edited Jan 19 '15 at 12:26

answered Jan 19 '15 at 11:21

web-tiki

99,765
32
217
249

I think you mean *container height* ;) – jbutler483 Jan 19 '15 at 11:25
@jbutler483 no all percent margins and paddings are calculated according to **paren'ts width** [see the specs](http://www.w3.org/TR/CSS2/box.html#margin-properties) – web-tiki Jan 19 '15 at 11:29
1

Thanks for the answer... what idiot decided it should be based on the width??? that is stupid! – RISC OS 3 Jan 19 '15 at 11:34
@web-tiki: I didn't actually know that :3. Mind you, I don't really use margins much (more positioning/pseudo elements instead). So cheers for that :) – jbutler483 Jan 19 '15 at 11:35
@RISCOS3 I don't know who decided that but it does allow to keep a [fixed aspect ratio for an element](http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div). – web-tiki Jan 19 '15 at 11:38
1

@jbutler483 note that there are some exceptions like in [flexbox layout](http://stackoverflow.com/questions/23717953/padding-bottom-top-not-working-in-flexbox-layout-firefox). – web-tiki Jan 19 '15 at 11:40

score 0 · Answer 2 · answered Jan 19 '15 at 11:22

You could use positioning in order to achieve this. So rather than setting the height of the p element, allow the positioning to do that for you (by adding bottom: 15%; and top:15%;). This would leve you with 70% content (as desired, I believe):

div{
  height:200px;
  background:yellow; 
  position:relative;
  
}

p{
  position:absolute;  
  width:100%;
  background:red;
  top:15%;
  bottom:15%;
  overflow:auto;
}

<div>
  <p>
i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p.
  </p>
</div>

Thanks for the reply... you and web-tiki have both been helpfull ;) — RISC OS 3, Jan 19 '15 at 11:35
@RISCOS3: Web-tiki knew the reasoning behind it, I stuck with what I knew (which was, a 'work around'). So all in all, I think Web-tiki deserves that green tick. — jbutler483, Jan 19 '15 at 11:37

What does % height in css mean

2 Answers2