페이지를 채우는 textarea를 확장하는 방법

나는 최고 막대기 및 textarea를 가진 아주 간단한 html 페이지가 있었다. 텍스트 영역에서 위쪽 막대가 남긴 높이를 채우기를 원합니다. 크기 조정 후 자동으로 조정해야합니다.페이지를 채우는 textarea를 확장하는 방법

예.

<html> 
<body> 
    <div id="top" /> 
    <textarea id="text" /> 
</body> 
</html>

나는 잔뜩 시도했다하지만 난 항상 두 개의 스크롤 (텍스트 영역에 대한 하나의 몸 하나)와 끝까지.

출처

2014-09-17 Gatis

수 당신이 시도한 것을 보여 주시겠습니까? 당신은 올바른 길을 가고 있었지만 우리는 알지 못할 것입니다. 그리고 그 모든 시간을 낭비합니다. –

일반적으로 '오버 플로우'속성은 스크롤바의 모양을 제어하지만, @ SterlingArcher가 말했듯이, 여러분이 시도한 것을 알려주세요 - 그리고이 경우 중요한 것은 당신이 어떤 브라우저를 타겟팅하고 있는지입니다. – BadZen

정확하게 이해했다면 어쩌면 이것이 도움이 될 수도 있습니다. jsfiddle 그러나 이것이 내가 원하는 것인지, 그리고 내가 생각하는 것 중 원판 일지는 확실하지 않습니다. 또한이 고정 된 높이가있는 경우 이미 CSS를

HTML

<div class="content"> 
    <div id="top"></div> 
    <textarea id="text"></textarea> 
</div>

CSS

body,html{ 
    height:100%; 
    padding:0; 
    margin:0; 
} 
.content{ 
    position:relative; 
    height:100%; 
} 
#top{ 
    height:50px; 
    background-color:#CCC; 
    width:100%; 
} 
#text{ 
    height:85%; 
    border:0; 
    padding:0; 
    margin:0; 
    background-color:#999; 
}

출처

2014-09-17 02:11:10

명시 적으로 톱 바 크기를 설정하고 싶지 않습니다. 나는 그것이 자유롭게 성장하고 text-div가 나머지의 100 %를 차지하기를 원한다. – Gatis

에 대한 재설정이있는 경우를 피할 수있는 몇 가지 선언이 있다는 것을 알 위쪽 막대를 사용하면 텍스트 영역에서 절대 위치를 사용하여 나머지 영역을 채울 수 있습니다.

body { 
 
    margin: 0; 
 
} 
 
#top { 
 
    color: #ffffff; 
 
    background: #333399; 
 
    height: 50px; 
 
    padding: 10px; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#text { 
 
    position: absolute; 
 
    top: 50px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    padding: 10px; 
 
    margin: 0; 
 
    resize: none; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div id="top">Top</div> 
 
<textarea id="text">Textarea</textarea>

출처

2014-09-17 02:18:50 3dgoo

텍스트 영역에 충분한 텍스트가있을 때 두 개의 스크롤 막대가 나타납니다. – Gatis

이것은 Chrome에서 발생하지 않습니다. 텍스트가 충분하면 텍스트 영역에 수직 스크롤 막대가 생깁니다. 어떤 브라우저가이 문제를 해결하고 있습니까? – 3dgoo

크롬. 나는 textarea를 채웠고, 2 자루의 막대기를 쳤다. – Gatis

확인이 코드

JS :

totalCalc(); 
function totalCalc() 
{ 
    var bodyHeight = $("body").outerHeight(true); 
    var topHeight = $("#top").outerHeight(true); 
    var txtareaHeight = bodyHeight - topHeight - 10; 
    $('#text').attr("style", "height:" + txtareaHeight + "px"); 
} 
$(window).resize(totalCalc);

CSS :

*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;} 
html, body{height:100%; overflow:hidden;} 
#top{padding:10px;} 
#text{margin:0 10px;}

Fiddle

출처

2014-09-17 04:51:10

페이지를 채우는 textarea를 확장하는 방법

답변

관련 문제