CSS3 width and height ratio

Question

So, I've got confused over this and then realized I actually don't have an idea what should I type as a query in Google so I'd get the answer:

If I wanted to define height and width in CSS3 using percentages, for example:

#wrap{
  width: 100%;
  height: 250%;
}

Is height calculated according to the full height of the view port, or is it calculated according to defined width (as if - the set width becomes a base value for everything)? For example:

width = 1000px
height = 1200px

Is then:

width = 100% <=> width = 1000px
height = 250% <=> height = 2.5 * 1200px = 3000px

or is:

width = 100% <=> width = 1000px
height = 250% <=> height = 2.5 * width = 2.5 * 1000px = 2500px

?

Also, does the same rule, whichever it may be, apply to all other elements as well? Do I calculate the height according to the height of the parent and width according to the width of the parent, or does width become THE 100% which everything relates to?

score 4 · Accepted Answer · edited May 23 '17 at 12:22

4

Height is not necessarily calculated to the full height of the view port, it's calculated by the defined witdth. If you have #wrap nested inside #container and defined it as follows:

#container{
height: 1000px;
width: 200px;
}

#wrap{
height:100%;
width: 50%;
}

Then by declaring the wrap height as 100% that's 100% of my 1000px (which is 1000px), however the width of 50% is 50% of 200px (100px). Though if it wasn't nested then it is still calculated by the "defined width" which is set to by default the whole browser window, unless specified otherwise.

Yes, the same rule applies to all other elements and is calculated to the height and width of the parent.

For viewports and the like and sizing it to the full size of the browser window I recommend looking at this post by James on Make div 100% height of browser window. He goes into great depth about how viewports work and their advantages over the normal 100%

edited May 23 '17 at 12:22

Community

1
1

answered Apr 08 '15 at 00:07

frog1944

245
5
13

and if I immediately say: #container{ width: 100%; height: 300%; } #div1{ width: 100%; height: 100%; } then the total height would be three times the size of the view port and the div1 would be a full-screen block? Thank you so much, by the way... – dzenesiz Apr 08 '15 at 00:19
1

Its ok, I believe that if you had the #div1 nested inside the #container it would also be 3x the size of the view port, as #div1 height is set to 100% of it's parent #container (which is height: 300%). So #div1 would completely fill the #container. Though I could be mistaken on the whole 3x size of the viewport – frog1944 Apr 08 '15 at 00:30
You're not mistaken. It was my mistake, slip of the mind... I would have to set div1's height to 33.3% for it to be 100% of the viewport. – dzenesiz Apr 08 '15 at 00:53
Yeah, approximately 33.3% – frog1944 Apr 08 '15 at 00:55

score 1 · Answer 2 · answered Apr 08 '15 at 00:05

for instance if you have this :

<div id="outer">

<div id="inner"></div>

</div>

and this css

#outer {
width: 1000px;
height: 1000px;
}

#inner {
width: 50%;  /* is 500 */
height: 200%; /* is 2000 */
}

here's a scaled fiddle: http://jsfiddle.net/q6ux91x9/

The percentage system works in relation to the containing element or document/window if no containing element exists.

CSS3 width and height ratio

2 Answers2