높이 및 너비 백분율을 기준으로 div를 만드는 방법은 무엇입니까?

Question

백분율을 기준으로 div의 높이와 너비를 만드는 방법을 알려주세요.

여기에 내가 테이블로 만들었습니다. 내가 div로 만들고 싶은 똑같은 것. 상기 TD 모두

<table border="1" cellpadding="0" cellspacing="0" width="80%" height="80%"> 
<colgroup> 
    <col width="80%" /> 
    <col width="20%" /> 
</colgroup> 
<tr> 
    <td style="background-color: yellow;">abc</td> 
    <td style="background-color: red;">cde</td> 
</tr> 

는 스크롤해야한다. 콘텐츠로 크기를 확장해서는 안됩니다. 누구든지이 예제 데모를 만들 수 있습니다.

Answer 1

가장 큰 문제입니다, 당신의 div '을의 스크롤 할 필요가 그래서 절대 위치 사용합니다 recommened 것이다 :

을

div { 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    overflow: auto 
} 


.left { 
    width: 80%; 
    left: 0; 
    background: red 
} 


.right { 
    width: 20%; 
    left: 80%; 
    background: yellow 
} 

http://fiddle.jshell.net/eZerH/

업데이트, 절대 위치를 방지이 플로트 기반 레이아웃 시도

:

http://fiddle.jshell.net/eZerH/1/

Answer 2

다음과 바이올린 참조하십시오

http://jsfiddle.net/itz2k13/64WAW/6/

.inner-box-80{ 
    width: 80%; 
    float: left; 
    background-color: red;  
    height: 100%; 
    overflow: auto; 
} 
.inner-box-20{ 
    width: 20%; 
    float: left; 
    background-color: yellow; 
    height: 100%; 
    overflow: auto; 
} 

Answer 3

PLS는 CSS3의 인 flexbox 모듈을 시도한다.

html,body { margin: 0; padding: 0; height: 100%; } 
body { 
    display: -moz-box; /*Safari, iOS, Android browser, older WebKit browsers. */ 
    display: -webkit-box;/* Firefox (buggy) */ 
    display: -ms-flexbox; /*IE 10*/ 
    display: -webkit-flex;/*Chrome 21+ */ 
    display: flex;/*Opera 12.1, Firefox 22+ */ 

    -moz-box-align: stretch; 
    -webkit-box-algin: stretch; 
    -ms-flex-align: stretch; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
} 
.main { 
    background: green; 
    width: 80%; 
    overflow: auto 
} 
.sidebar { 
    background: orange; 
    width: 20%; 
} 

pls보기 demo.