Question

第一张图片没有溢出。顶部是在我按下按钮之前，底部是在之后。

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

此图片位于overflow:auto。顶部是在我按下按钮之前，底部是在之后。

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

我正在寻找的是在按下按钮之前在第一张图像中看起来像它的面板，以及当我按下按钮时在第二张图像中的样子。

以下是相关代码的副本：

<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，第二个以display: none开头，然后在按下按钮时更改为display: block。

更好的是垂直对齐事物是vertical-align: middle规则，每个元素设置为display: inline-block - 甚至可以在IE6中使用！

如何补偿溢出属性？

2 个答案: