css - 如何在浏览器屏幕缩小时显示水平滚动条

Question

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

我希望每当浏览器屏幕减小时...仪表板 DIV 应该得到 水平滚动条 而不是切断显示。 这是我如何在主视图中呈现局部 View 的代码。

<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。尝试将 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;
}