Как мне компенсировать свойство переполнения?

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 полностью содержится в контейнере, поэтому переполнение: auto должно содержать его. Я предполагаю, что вы скрываете textboxarea через видимость: скрытый, который заставит его не появляться, но он все равно займет место.

Вместо этого используйте дисплей: нет или часто предпочитайте позиционировать его с экрана с помощью абсолютного позиционирования, пока он вам не понадобится.

Answer 2

Я не понимаю, почему вам нужно переполнение или позиционирование. Просто используйте один внешний div (с голубым фоном/границей) и два внутренних divs, второй из которых начинается с display: none, а затем при нажатии кнопки изменяется на display: block.

Лучше было вертикально выровнять положение с помощью правила vertical-align: middle, и каждый элемент установлен в display: inline-block - который даже работает в IE6!