浏览器屏幕减少时如何显示水平滚动条

Question

这就是我制作的仪表板。其中包含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);

}

Answer 1

这种风格是罪魁祸首。

.LiveTile{
    overflow: hidden;
}

你告诉它隐藏任何不符合范围的东西。试试scroll或auto。

.LiveTile{
    overflow: scroll;
}

或者

.LiveTile{
    overflow: auto;
}

修改

抱歉，我认为你的标记混淆了，你想要标题下的div。尝试在div中包装Html.RenderAction("RecentRequests",Model);，Html.RenderAction("PriorityRequests",Model);等，然后将其应用到该文件中。

<强> 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;
}