虽然有更多元素要显示，但未显示滚动

Question

我正在使用asp.net，实体框架4

我的页面中有三个标签，如下所示：

我的问题

虽然表格中有超过150行退出，但浏览器不会显示滚动。

我的桌子的CSS是：

.tableResultClass{
        overflow:hidden;
        border:1px solid #d3d3d3;
        background:#fefefe;
        width:90%;
        margin:5% auto 0;
        -moz-border-radius:5px; /* FF1+ */
        -webkit-border-radius:5px; /* Saf3-4 */
        border-radius:5px;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

我不知道您需要解释我的问题的其他信息，所以如果您需要其他信息，请告诉我。提前谢谢。

整个asp代码

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <div id="onlineBookingDiv" style="float: right; position:fixed; right:0px; width:400px">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Today</a></li>
                        <li><a href="#tabs-2">Tomorrow</a></li>
                        <li><a href="#tabs-3">Any Date</a></li>
                        <label style="float: right">
                            <asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click">
                                <asp:ListItem Value="1">Breakfast</asp:ListItem>
                                <asp:ListItem Value="2">Lunch</asp:ListItem>
                                <asp:ListItem Value="3">Dinner</asp:ListItem>
                            </asp:DropDownList>
                        </label>
                    </ul>
                    <div id="tabs-1">
                        <asp:ScriptManager ID="ScriptManager2" runat="server" />
                        <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
                            <ContentTemplate>
                                <table id="BookingTable" runat="server" class="tableResultClass">
                                    <tr>
                                        <th>ID</th>
                                        <th>PlanTime</th>
                                    </tr>
                                </table>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="mealTimeSelector" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                    <div id="tabs-2">
                        <%--
                <div id="circleG" style="margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;">
                    <div id="circleG_1" class="circleG"></div>
                    <div id="circleG_2" class="circleG"></div>
                    <div id="circleG_3" class="circleG"></div>
                </div>
                        --%>
                        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                            <ContentTemplate>
                                <table id="BookingTableTomorrow" runat="server" class="tableResultClass">
                                    <tr>
                                        <th>ID</th>
                                        <th>PlanTime</th>
                                    </tr>
                                </table>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="mealTimeSelector" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                    <div id="tabs-3">
                        <p>
                            Date:
                    <input type="text" id="datepicker" runat="server" ClientIDMode="Static">
                        </p>


                        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                            <ContentTemplate>
                                <asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
                                <span style="color: red" id="errorDateMessage" runat="server"></span>
                                <%--
                        <div runat="server" id="circleG2" style="margin-left: auto; margin-right: auto; margin-left: 400px; padding-bottom: 60px;">
                            <div id="circleG_1" class="circleG"></div>
                            <div id="circleG_2" class="circleG"></div>
                            <div id="circleG_3" class="circleG"></div>
                        </div>
                                --%>
                                <table id="DateBookingTable" runat="server" class="tableResultClass">
                                    <tr>
                                        <th>ID</th>
                                        <th>PlanTime</th>
                                    </tr>
                                </table>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="mealTimeSelector" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                </div>
        </div>

Answer 1

此overflow:hidden;是滚动未显示的原因，因此请使用 任

overflow:scroll;

或

 overflow:auto;

.tableResultClass{
        overflow:scroll;  //or use auto
       min-height:100px;  //use min-height
        border:1px solid #d3d3d3;
        background:#fefefe;
        width:90%;
        margin:5% auto 0;
        -moz-border-radius:5px; /* FF1+ */
        -webkit-border-radius:5px; /* Saf3-4 */
        border-radius:5px;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

<强>但是 如果你需要溢出到水平隐藏，只需使用

overflow-x:hidden;

注意：请勿忘记提供min-hieght:*yourvalue*px