如何補償溢流屬性？

第一張圖片沒有溢出。頂部是我按下按鈕之前，底部是之後。

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>

來源

2009-12-18 Justen

你是如何 '隱藏' textboxArea？現在，textboxArea完全包含在容器中，所以overflow：auto應該包含它。我的猜測是你通過可見性隱藏了文本框區域：隱藏，這將使它不出現，但它仍然佔用空間。

取而代之的是使用display：none或者通常首選的方式，通過絕對定位將其定位在屏幕上，直到您需要爲止。

來源

2009-12-18 15:45:49

爲什麼絕對定位首選顯示：無？顯示：沒有任何東西肯定是我隱藏東西的首選方式，比將東西推出屏幕更有意義。 – Sekhat 2009-12-18 15:50:51

實際上，TextBoxes隱藏在後面的代碼（VB）中，如txtInfoData.Visible = false;我將如何使用顯示器：無按鈕單擊並將其切換到另一按鈕單擊？ – Justen 2009-12-18 15:55:54

@Sekhat定位屏幕外的東西往往是更好的可訪問性和搜索引擎優化的目的。 – 2009-12-18 15:57:57

我不明白你爲什麼需要溢出或定位。只需要一個外部div（帶有藍色背景/邊框）和兩個內部div，其中第二個以display: none開頭，然後在按下按鈕時更改爲display: block。

更好的是垂直對齊的東西是與vertical-align: middle規則，並且每個元素設置爲display: inline-block - 甚至可以在IE6中工作！

來源

2009-12-18 15:53:44 DisgruntledGoat

您通常需要溢出以確保容器div包含浮動元素。 – 2009-12-18 15:59:50

是的，但在這個例子中沒有必要浮動任何東西。 – DisgruntledGoat 2009-12-18 17:37:54

在我的文章的相關代碼中，我使用了浮動樣式。 – Justen 2009-12-18 18:03:56

如何補償溢流屬性？

回答

相關問題