높이가 0 인 텍스트 영역이 0 픽셀이 아닙니다.

내 페이지의 측면 패널에 접을 수있는 위젯을 만들려고합니다. 대부분의 경우 잘 작동합니다. 전환을 사용하여 하위 div의 높이를 0px로 설정할 수 있으며 사라집니다.높이가 0 인 텍스트 영역이 0 픽셀이 아닙니다.

그러나 텍스트 영역이 완전히 축소되지 않는 것으로 나타났습니다. 텍스트 영역의 높이를 0px로 설정하면 이 다른 div처럼 전환하려면이되지만 여전히 0px보다 많은 공간을 차지하는 것으로 보입니다. "축소"의 클래스 (가) 모든 형제를 순환

<div class="container"> 
    <div class="heading" onclick="toggleSiblings(this)">heading</div> 
    <textarea class="collapsible" placeholder="type in here..."></textarea> 
</div> 
<div class="container"> 
    <div class="heading" onclick="toggleSiblings(this)">heading</div> 
    <div class="collapsible"></div> 
</div>

toggleSibblings과 그들에 클래스를 "붕괴"전환 :

HTML은 다음과 같이한다. http://jsfiddle.net/447n50cy/이

사람이 내 왜 텍스트 영역이 여분의 공간을 점유 말할 수 :은 "붕괴"클래스는 높이가

여기에 내 문제를 보여주는 jsfiddle이야을 0 픽셀로 설정합니다?

출처

2014-11-24 n0w

'display : none'과 함께'height : 0'을 사용하지 않는 이유는 무엇입니까? –

그럼 나는 변화를 얻지 못합니다. 나는 처음에는'display : none'을'setTimeout()'으로 설정하여 전환이 표시되도록하려했지만 작동시키지 못했습니다. – n0w

float:left; 또는 display:block;을 padding:0;으로 바꾸면 붕괴됩니다. 인라인 블록 요소로서 제대로 붕괴하는 문제가 있습니다.

textarea { 
margin:0; 
padding:0; 
outline:0; 
}

이 바이올린이 추가 :

당신은 텍스트 영역을 재설정 할 수 있습니다 :

출처

2014-11-24 00:37:46 ryanpither

jQuery를 사용할 수 있다면 slideToggle()과 같은 함수가 모든 표시/부동/넘침/패딩 문제를 처리한다고 생각합니다. – ryanpither

감사합니다. 'display : 블록;'문제를 해결했습니다! – n0w

텍스트 영역은 기본 마진과 패딩이있다. 문제는 사람들이 텍스트 영역에 뭔가를 입력 할 때 약간의 패딩을 원한다는 것입니다. jQuery를 사용하여 클래스를 쉽게 추가하고 제거 할 수있다.

출처

2014-11-24 00:45:35 Michelangelo

높이가 0 인 텍스트 영역이 0 픽셀이 아닙니다.

답변

관련 문제