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

Question

вытекает из этот вопрос

Это первое изображение без переполнения. Верхняя часть - до нажатия кнопки, а нижняя - после.

альтернативный текст http://img19.imageshack.us/img19/7594/nooverflow.png

---

И это изображение с overflow:auto. Верхняя часть - до того, как я нажму кнопку, а нижняя - после.

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

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

Answer 2

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

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