Height Percent

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

1. :after를 이용하는 방식

							<div id="" class="div_height_percent">
								<div id="" class="inner">
									<h2>이것은 비율로 작동한다.</h2>
									<p>비율은 padding으로 조정한다.</p>
								</div><!-- /inner -->
							</div><!-- /div_height_percent -->
						
							.div_height_percent{position:relative;width:30%;margin:0 auto;border:1px solid red;}
							.div_height_percent:after{content:' ';display:block;padding-top:100%;}
							.inner{padding:50px;position:absolute;top:0;right:0;bottom:0;left:0;}
						

이것은 비율로 작동한다.

비율은 padding으로 조정한다.



2. 내부의 dummy div를 이용하는 방식

							<div class="r_container">
								<div class="dummy"></div>
								<div class="element">
									<h2>이것은 비율로 작동한다.</h2>
									<p>비율은 padding으로 조정한다.</p>							
								</div>
							</div>
						
							.r_container{display:inline-block;position:relative;width:50%;margin:0 auto;border:1px solid red;}
							.dummy{padding-top:75%;}
							.element{padding:50px;position:absolute;top:0;right:0;bottom:0;left:0;background-color:silver;}
						

이것은 비율로 작동한다.

비율은 padding으로 조정한다.



dummy 클래스 div에 visibility:hidden;을 사용할 수 있을 지 확인이 필요함.
element 클래스 div에 z-index를 사용할 수 있을 지 확인이 필요함.