Why the difference when using percentage vs px to define height?

Why the difference when using percentage vs px to define height?

I am trying to achieve the fade-in and fade-out effect as mentioned here Jquery replacewith fade/animate, but I would like to avoid content below it moving up and down. So I define a container with fixed height.

<div class="container"> <div id="foo"></div> </div> <h1>content below</h1>

If I set the height of container using px, "content below" will not move up and down during the animation.

.container { height: 475px; }

But if I set "height: 90%;", then it will. Why?

I prefer to use percentage, so how to in this case?

Percentage works when you have a parent container of fixed height or of content. In your case the content is none so % of nothing is turning out to be nothing. But fixed height serves the purpose as that is absolute height in px.
– Charu Maheshwari
Jul 24 at 4:51

2 Answers
2

Percentages are relative and pixels are absolute. The computer knows what 400 pixels is. However when the measurement is relative, the final absolute output must have a relation with some other measurement. 400px is 50% of 800px.

If example you have no content in your <body>, the page collapses and it has no height.

<body>

If you set <body>'s height to 100%, it still has no height because its parent <html> has no height. However by setting <html>'s and <body>'s heights to 100% you will fill the viewport (html's "parent").

<body>

<html>

<body>

This applies to other block elements like divs.

I forget to mention that I do have "html, body { height: 100%; width: 100%; }". I will put everything together and test more. Another thing, I also use Bootstrap, so it may complicate. I don't know. I will try. Thank you.
– user180574
Jul 24 at 5:31

I found that when using bootstrap, should use "vh" as %.
– user180574
2 days ago

Pixels are an absolute unit of measure. Percents are relative to some other value.

Each have valid use cases, neither is "better".

Reference : More detail here

I mean: given my question and when the window size doesn't change is "height: 90%" a fixed value or not? I am not asking the difference in general sense.
– user180574
Jul 24 at 4:50

@user180574 CSS: why the difference when using percentage vs px to define height?
– Dr. Strange
Jul 24 at 4:51

CSS: why the difference when using percentage vs px to define height?

its not fixed value its change with your screen
– Dr. Strange
Jul 24 at 4:54

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Xuykyuu