DIV 또는 TEXTAREA 유체를 수직으로 확장

Question

다른 시각적 요소가 겹치지 않도록 가능한 한 수직 공간을 차지하도록 textarea를 사용하고 싶습니다. 분명히 다른 화면/장치는 높이가 다르기 때문에 유동적 인 솔루션이 필요합니다 (올바른 용어라고 생각합니다).

내가 본 다른 질문에는 텍스트 영역이 포함되어 있지 않고 대신 내용이 이미 결정된 (하위) DIV를 사용하고 있습니다. 텍스트 영역을 내용에 맞게 동적으로 확장 할 필요는 없습니다. 가능한 한 높지만 다른 요소는 숨기지 않고 텍스트 영역을 동적으로 확장해야합니다.

내가 함께 비슷한 질문에 대한 답변의 일부를 수집했지만 확실히 작동 할 수 없습니다 : http://jsfiddle.net/wa5zU/

CSS :

body, html { 
    height:100% 
} 
p { 
    text-align:justify 
} 
textarea { 
    resize:vertical; 
    height:auto; 
    width:100%; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 
.vexpand { 
    border:1px solid blue 
} 
.vexpand { 
    position:absolute; 
    bottom:0; 
    width:90%; 
    height:auto 
} 

HTML :

<h2>Some content of variable length/height to fill the top portion of the screen</h2> 

<p>Either: 1) make the blue-bordered DIV expand fluidly to fill this gap or 2) make the textarea expand to achieve the same effect</p> 
<div class="vexpand"> 
    <div>One line of content related to the textarea that must be kept with the textarea</div> 
    <textarea rows=5 cols=10>I have heard that textareas need valid rows and cols attributes in order to respond correctly to height and width css</textarea> 
</div> 

이 시도 DIV가 위쪽으로 확장 될 수 있다고 가정하면 position:absolute 및 bottom:0을 기반으로합니다. DIV/TEXTAREA 위의 내용이 가변적이어서 top에서 우아하고 견고한 측정 방법을 찾을 수 없기 때문에이 방법을 사용했습니다.

텍스트 영역과 관련하여 텍스트 영역과 관련된 내용의 줄이 있으므로이 내용과 텍스트 영역을 div에 캡슐화해야합니다. 이상적으로는 텍스트 영역 위에 머물러있는 콘텐츠를 선호합니다.

• position:absolute 그 CSS는
• 이 height:auto를 사용하여 계산을 수행 할 수 있도록
• heightbody의 및 html 100 %를 설정 충돌 절대 위치 :

  것들 내가 관련 질문에서 볼/시도했습니다 또는 height:100% 래퍼 div .vexpand 또는 textarea

• 01로 설정하십시오. 있도록 textarea에 2,및 rows 속성은 이것이 당신이 원하는 무엇인가 height 및 width

Answer 1

에 응답?

http://jsfiddle.net/wa5zU/2/

body, html { 
    height:100%; 
    margin: 0; 
    padding: 0; 
} 
p { 
    text-align:justify 
} 
* 
{ 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 

textarea { 
    resize:vertical; 
    height: calc(100% - 20px) ; 
    width:100%;  
} 

.text-content 
{ 
    height: 80%; 
    overflow: auto; 
    padding: 10px; 
} 

.editor 
{ 
    height: 20%; 
    overflow: hidden; 
    padding: 10px; 
}