如何在瀏覽器屏幕減少時顯示水平滾動條

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

編輯：

對不起，我想我得到了你的標記混在一起，你要定位的標題下的股利。嘗試將Html.RenderAction("RecentRequests",Model);，Html.RenderAction("PriorityRequests",Model);等封裝在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; 
}