ASP.NET MVC - 默认布局为全屏

.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标签时，内容仍然显示为下图。

例

来源

2016-04-14 LCaraway

在Content目录存在的site.css文件，在该文件修改最大宽度：960像素;

来源

2016-04-15 00:05:39 DanielVorph

哪个元素？为什么宽度？为什么960px？试图在HTML和身体标签没有运气。 – LCaraway

max-width：100％; – DanielVorph

什么标签在CSS？ – LCaraway

我认为这将帮助你..根据窗口体内含量

写这样的代码在JavaScript ..

<script> 

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

    }); 

    window.onresize = ResizeContentContainer; 

    function ResizeContentContainer() { 

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

这将增加高度，当你重新大小它会自动计算你身体内容的高度。

来源

2016-04-15 05:45:09

这里也没有运气。使用谷歌开发人员工具，我可以确认身体确实扩展到屏幕的整个高度，但内容仍然保持在大约一半的高度。 – LCaraway

ASP.NET MVC - 默认布局为全屏

回答

相关问题