通常、子要素のwidthとheightの値をautoにすると親要素の値に従って設定されるがiframeなどはautoで調整ができないため、親要素の依存した値に設定したい場合はラッパー領域を用意してその領域を調整するという方法をとることができます。
padding-top/padding-bottomで％の単位で指定し、以下のような計算で値が決定されます。
子要素の縦の長さ＝横の長さ X padding-topの値(%)
|
1 2 3 4 5 6 7 8 9 10 |
//親要素 #parent{ width: 600px; height:300px; } //子要素 .wrapper{ padding-top: 5%; } |
上記の例だと、600px X 0.05 = 30pxとなり、子要素の縦の長さは30pxとなります。
