2016-04-14 156 views
0

.NET框架,mvc和visual studio的新手,所以這可能是一個簡單的問題。無論出於何種原因,儘管經歷了數小時的試驗和錯誤,但在使用由新的MVC應用程序創建的默認佈局時,我無法讓我的視圖佔據整個頁面。ASP.NET MVC - 默認佈局爲全屏

我已經嘗試過各種css技巧來將元素擴展到100%高度,而不是什麼都沒有過這樣的運氣。有沒有辦法使用bootstrap來做到這一點?如果沒有,關於如何做到這一點而不影響自舉的任何建議?

我已經能夠通過實現「行」類來獲得跨越整個頁面的寬度。這個高度部分仍然難以捉摸。

_layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 
    <title>@ViewBag.Title - Crestwood Weather</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.ActionLink("Crestwood Weather Viewer", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")   </li> 
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div> 

    <div class="container-fluid body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - Crestwood Midstream Partners LP</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

看來它限制到頁面的一半高度的觀點也僅限於在佈局東西的HTML和身體。即使在操縱HTML和Body標籤時,內容仍然顯示爲下圖。

enter image description here

回答

0

在Content目錄存在的site.css文件,在該文件修改最大寬度:960像素;

+0

哪個元素?爲什麼寬度?爲什麼960px?試圖在HTML和身體標籤沒有運氣。 – LCaraway

+0

max-width:100%; – DanielVorph

+0

什麼標籤在CSS? – LCaraway

0

我認爲這將幫助你..根據窗口體內含量

寫這樣的代碼在JavaScript ..

<script> 

    $(document).ready(function() { 
     ResizeContentContainer(); 

    }); 

    window.onresize = ResizeContentContainer; 

    function ResizeContentContainer() { 

     var windowHeight = $(window).height(); 
     $(".body-content").outerHeight(windowHeight + "px"); 
    } 
</script> 

這將增加高度,當你重新大小它會自動計算你身體內容的高度。

+0

這裏也沒有運氣。使用谷歌開發人員工具,我可以確認身體確實擴展到屏幕的整個高度,但內容仍然保持在大約一半的高度。 – LCaraway