CSS3宽高比

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?

Answer 1

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%

Answer 2

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.