오버플로 속성을 어떻게 보상합니까?

Question

형태소 분석 this question

이 첫 번째 이미지는 오버플로가 없습니다. 상단은 버튼을 누르기 전의 것으로, 하단은 뒤입니다.

---

alt text http://img19.imageshack.us/img19/7594/nooverflow.png

그리고이 이미지 overflow:auto으로한다. 상단은 버튼을 누르기 전의 것으로, 하단은 뒤입니다.

alt text http://img134.imageshack.us/img134/4015/overflow.png

---

은 내가 찾고 그것이 내가 버튼을 누르기 전에 첫 번째 이미지에서 수행하고, 내가이를 누를 할 때 제 2 이미지의 모양과 같이 할 수있는 패널입니다 단추.

<asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px"> 

... 

<style> 
     div.textboxArea { 
      text-align:center; 
      float:left; 
      width:40%; 
      margin-top:35px; 
     } 
     .textboxArea TextBox { 
      width:80%; 
     } 
     .centerMeVertically div { 
      position:absolute; 
      top:50%; 
      vertical-align:middle; 
      height:30px; 
      width:100%; 
      margin-top:0px; 
      text-align:center; 
     } 
     div.centerMeVertically { 
      float:left; 
      width:20%; 
      text-align:center; 
      height:60px; 
      position:relative; 
     } 
     p { 
      margin:-35px 0 0 0; 
     } 
     .container { 
      margin-top:10px; 
      margin-bottom:10px; 
      overflow:auto; 
     } 
    </style> 

    <div class="container"> 
     <div style="width:100%;"> 
      <div class="textboxArea"> 
       <p><asp:Label runat="server" ID="lblInfoDesc" /></p> 
       <asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" /> 
      </div> 

      <div class="centerMeVertically"> 
       <div><asp:Button ID="btnNextInfo" runat="server" Text="Next" /></div> 
      </div> 

      <div class="textboxArea"> 
       <p><asp:Label runat="server" ID="lblInfoData" /></p> 
       <asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" /> 
      </div> 
     </div> 
    </div> 

Answer 1

어떻게 textboxArea 당신을 '숨기기'됩니다

다음은 관련 코드의 복사본입니까? 지금 textboxArea는 컨테이너 내에 완전히 포함되어 있으므로 overflow : auto에 포함되어야합니다. 내 생각 엔 가시성을 통해 textboxarea를 숨기고 있습니다. 숨김으로 표시되지 않지만 여전히 공간을 차지합니다.

대신 display : none을 사용하거나 필요할 때까지 절대 위치 지정을 통해 화면에서 벗어나게하십시오.

Answer 2

오버 플로우 또는 위치 지정이 필요한 이유가 표시되지 않습니다. 하나의 바깥 쪽 div (파란색 배경/경계선)와 두 개의 내부 div가 있으며 두 번째 안쪽 div는 display: none으로 시작하고 버튼을 누르면 display: block으로 변경됩니다.

더 나은 수직 정렬 작업은 vertical-align: middle 규칙이며, 각 요소는 display: inline-block으로 설정되었습니다. 이는 IE6에서도 작동합니다!