컨테이너 행 높이 자동 채움/CSS로 조정

Question

컨테이너 (래퍼) 2 개의 컨테이너 행이 있고 두 행의 높이 값을 자동으로 지정하여 그 안에 내용에 따라 동적으로 크기를 조정할 수 있습니다. 행 높이 46 %, 행 하단 54 %). 하단 행 컨테이너의 높이를 자동으로 CSS (* JavaScript가 아닌)로 화면에 채우려 고합니다. 아래 첨부 된 이미지에서 원하는 결과를 확인하십시오. 제발 조언을 해줘. 고마워.

Click here for preview at JSfiddle

HTML

<div id="content-wrapper"> 
    <div id="row-top"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </div> 
    <div id="row-bottom"> 
     <iframe id="gmap"></iframe> 
    </div> 
</div> 

CSS

#content-wrapper { 
    display:block; 
    height:100%; 
    overflow-y: scroll; 
    width:600px; 
    float:left; 
    background-color:yellow; 
} 

#row-top { 
    color:#fff; 
    display:block; 
    position:relative; 
    width:100%; 
    height:auto; 
    background-color:blue; 
} 

#row-bottom { 
    display:block; 
    width:100%; 
    height:auto; 
} 

iframe#gmap { 
    overflow: hidden; 
    height:100%; 
    width: 100% 
} 

Click here for preview at JSfiddle

의도 된 결과 :

Answer 1

일반적인 CSS를 사용하는 방법은 없습니다.

일반적인 CSS를 사용하려면 컨테이너에서 display을 table으로 설정하고 어린이는 table-row 값을 사용해야합니다. 자, 사양은 (익명) 세포의 높이를 계산하는 방법을 정의하지 않지만, height을 100%으로 설정하면 (적어도 Firefox에서는) 작동하는 것으로 보입니다.

CSS Flexible Box Layout Module에 정의 된 CSS 속성을 사용하여 수행 할 수도 있습니다. 일부 브라우저의 일부 구버전에서는 properly supported이 아닙니다.

그러나이 새로운 레이아웃 모듈을 사용하면 컨테이너의 display을 flex 및 flex-direction ~ column으로 설정하면됩니다. 이렇게하면 일반 블록 레이아웃과 같은 레이아웃을 얻을 수 있지만 두 번째 행에 대해 flex을 1으로 설정하면 모든 공간이 남아있게됩니다.

작업 바이올린 : http://jsfiddle.net/Q4uC8/1/ 당신의 추천에 대한