1

这就是我制作的仪表板。其中包含 4 DIVs。当浏览器屏幕完全打开时 当我减小浏览器的屏幕尺寸 时浏览器完全打开 当我减小浏览器屏幕时。

每当浏览器屏幕减小时，我都希望...仪表板DIVs应该得到horizontal scroll bar而不是削减显示。这是我如何在主视图中呈现部分视图的代码。

<fieldset>
    <%using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace}))/*, UpdateTargetId = "RecentDiv" }))*/
      { %>


    <div id="MainDashboardDiv">
        <div class="LiveTile">
            <div id="RecentDiv"> 
                    <h4 class="RequestTitle">
                    <%: Html.ActionLink("Recent Requests", "CRMRequestsList", new { requestType = "Recent" })%>
                    </h4>
                <%Html.RenderAction("RecentRequests",Model); %>
            </div>
            <!--End of RecentDiv -->

            <div id="PriorityDiv">
                <h4 class="RequestTitle">
                    <%: Html.ActionLink("High Priority Requests", "CRMRequestsList", new { requestType = "Priority" })%>
                 </h4>

                <%Html.RenderAction("PriorityRequests", Model); %>
            </div>
            <!--End of PriorityDiv -->
        </div>
        <!--End of UpperLiveTiles -->
        <div class="LiveTile">

             <div id="PendingDiv">
                <h4 class="RequestTitle">
                <%: Html.ActionLink("Pending Requests", "CRMRequestsList", new { requestType = "Pending" })%>
                </h4>
                <%Html.RenderAction("PendingRequests", Model); %>

            </div>
            <!--End of PendingDiv -->
            <div id="ApprovedDiv">
                    <h4 class="RequestTitle">
                    <%: Html.ActionLink("Approved Requests", "CRMRequestsList", new { requestType = "Approved" })%>
                    </h4>
                <%Html.RenderAction("ApprovedRequests", Model); %>

             </div>
            <!--End of ApprovedDiv -->


        </div>
        <!--End of LowerLiveTiles -->
    </div>
    <!--End of MainDashboardDiv -->
    <%} %>
    </fieldset>

这是我应用的 CSS：

#MainDashboardDiv {
    height: auto;
    width: 100%;
    margin: 0 auto;  
    padding-bottom: 4%; 
    overflow: hidden;

}
.LiveTile{
    height: 260px;
    overflow: hidden;
    padding-top: 1%;
    position: relative;
    width: 100%;
}

#RecentDiv, #PendingDiv
{
    width: 48%; 
    display: inline-block; 
    position: relative; 
    height:inherit;
    overflow: scroll;
    float: left;
    margin-bottom: 1%;
    margin-right: 1%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background:rgba(0,117,149,0.9);
}
#PriorityDiv,#ApprovedDiv
{

    width: 48%;  
    position: relative; 
    height:inherit;
    display: inline-block;
    overflow: scroll;
    float: left;
    margin-bottom: 1%;
    margin-right: 1%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background:rgba(0,117,149,0.9);

}
4

1 回答 1

1

这种风格是罪魁祸首。

.LiveTile{
    overflow: hidden;
}

你告诉它隐藏任何不符合界限的东西。尝试scroll或auto。

.LiveTile{
    overflow: scroll;
}

或者

.LiveTile{
    overflow: auto;
}

编辑：

抱歉，我想我把你的标记弄混了，你想定位标题下的 div。尝试将Html.RenderAction("RecentRequests",Model);,Html.RenderAction("PriorityRequests",Model);等包装在 div 中并将其应用到该 div 中。

HTML

<div id="RecentDiv"> 
        <h4 class="RequestTitle">
        <%: Html.ActionLink("Recent Requests", "CRMRequestsList", new { requestType = "Recent" })%>
    </h4>
    <div class="InnerDiv">
        <%Html.RenderAction("RecentRequests",Model); %>
    </div>
</div>

CSS

.InnerDiv {
    overflow:scroll;
}
于 2013-04-01T07:07:01.247 回答