CSS - 최대 높이 : 100 %가 텍스트 영역에서 작동하지 않습니다.

Question

나는 div을 가지고 있는데, 헤더, 텍스트 영역 및 바닥 글로 구성되어 있습니다. 머리글과 바닥 글은 내용만큼 크며 텍스트 영역은 나머지 공간을 차지합니다. 텍스트 영역의 높이가 100 %를 초과하지 않아야하므로 텍스트 영역의 글꼴 크기는 max-height입니다. 그러나 텍스트 영역의 크기를 조정하면 텍스트 영역이 부모의 100 %보다 커집니다. 이것을 방지하는 방법?

번호 : http://jsfiddle.net/FC7eY/1650/는

요약 : 모든 요소의 높이의 합계가 100 %이어야

• 는
• textarea-wrapper DIV의 높이 totalHeight(100%) - headerHeight - footerHeight
• 헤더이어야하며 바닥 글은 고정 된 높이가 아니어야하며, 내용물만큼 커야합니다. 부모/래퍼 DIV의
• 높이가 80 %이어야하며, 당신은 당신이 텍스트 영역의 높이와 너비 CALC의 CSS를 사용하여 동일한 화면 크기로 사람들을보고 싶다면 폭은 350px

Answer 1

해야합니다. 당신은 어떤 화면 크기의 모든 요소를 ​​볼 수있는 디스플레이 테이블과 테이블 행을 사용합니다. 글쎄, 당신은 높이에 대해 teaxarea div의 높이 계산 기능을 사용할 수 있습니다. 과 같은 것으로부터 머리글과 바닥 글 높이를 제거하십시오. ** Updated Fiddle 업데이트를 확인하십시오. CSS의 부분은

는 UPDATE : 당신은 모든 부모를 위해 높이 100 %를 가지고 있기 때문에 남아있는 높이와 너비와 텍스트 영역을 취할 것입니다 이제 2 사업부는 콘텐츠 것, 수평

html, 
 
body, 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrap { 
 
    width: 350px; 
 
    height: 80%; 
 
    display: table; 
 
    border: 3px solid magenta; 
 
} 
 

 
.wrap > div { 
 
    background: red; 
 
    display: table-row; 
 
    height: 0; 
 
} 
 

 
#textarea-wrapper { 
 
    background: pink; 
 
    height: auto; 
 
} 
 

 
#text { 
 
    max-width: calc(350px - 3px); 
 
    max-height:100%; 
 
}

<div class="wrap"> 
 
<div id="header">Header<br>Header<br>Header<br>Header<br>Header<br></div> 
 
<div id="textarea-wrapper"> 
 
    <textarea id="text"></textarea> 
 
</div> 
 
<div id="footer">Footer<br>Footer<br>Footer<br>Footer<br></div> 
 
</div>