绕过父级的最大宽度：将 div 宽度设置为窗口宽度的 100%

Question

我创建了一个基于 Microsoft 提供的默认设计/视图的 asp.net MVC 站点。所以它看起来完全像this site。

我制作了我的应用，现在我想稍微改变一下外观。这里有一个问题：这个默认视图模板完全错误。

我想做什么：

为什么我不能：

在我网站的每个页面上都有相同的 _Layout.cshtml 文件（它可能被称为“部分视图”）。以下是它处理网站主要部分的方式：

<div class="container body-content">

    @RenderBody() <!-- HERE GOES THE MAIN PART OF SITE -->

</div>

在@RenderBody 加载的视图中，我想创建一个与顶部黑色导航栏一样宽的 div。我不能，因为父 (div .container .body-content) 已指定“最大宽度”。所以我不能让我的 div 宽度达到身体的 100%。

• 我无法删除最大宽度，因为我想保留其余的视图 现在的地方。
• 我无法修改所有视图并添加一些 具有“最大宽度”并从中删除“最大宽度”的标签 “。容器”。或许我可以，但工作量太大。

你建议我怎么做？有什么简单的方法可以让这个 div 100% 宽度，但不改变视图对象的位置？

Answer 1

您可以尝试拆分内容页面。 灰色的 Contoso 大学将是它自己的 div，您可以通过保持第二个 div 与您拥有的原始 css 保持不变来更改任何内容。

Answer 2

这有点老套，但它对我有用。它基本上是创建一个与当前灰条高度相同的伪元素，并将其设置为全宽灰条。

将此添加到您的 CSS（您可能还需要调整“jumbotron”栏的高度以使其完美）：

.jumbotron:after{
    content:"";
    top:0;
    left:0;
    right:0;
    height:240px;
    z-index:-1;
    position:absolute;
    background:#EEEEEE;
}

Answer 3

基本上不是这个 HTML：

<div class="container body-content">
    <div class="jumbotron">
        <h1>Contoso University</h1>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>Welcome to Contoso University</h2>
            <p>
            Contoso University is a sample application that
            demonstrates how to use Entity Framework 6 in an
            ASP.NET MVC 5 web application.
            </p>
        </div>
    <div class="col-md-4">
        <h2>Build it from scratch</h2>
        <p>You can build the application by following the steps in the tutorial series on the ASP.NET site.</p>
        <p><a class="btn btn-default" href="http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/">See the tutorial »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Download it</h2>
        <p>You can download the completed project from the Microsoft Code Gallery.</p>
        <p><a class="btn btn-default" href="http://code.msdn.microsoft.com/ASPNET-MVC-Application-b01a9fe8">Download »</a></p>
    </div>
</div>

你可以使用：

<div class=" body-content">
    <div class="jumbotron">
        <h1>Contoso University</h1>
    </div>
</div>
<div class="container body-content">
    <div class="row">
        <div class="col-md-4">
            <h2>Welcome to Contoso University</h2>
            <p>
            Contoso University is a sample application that
            demonstrates how to use Entity Framework 6 in an
            ASP.NET MVC 5 web application.
            </p>
        </div>
    <div class="col-md-4">
        <h2>Build it from scratch</h2>
        <p>You can build the application by following the steps in the tutorial series on the ASP.NET site.</p>
        <p><a class="btn btn-default" href="http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/">See the tutorial »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Download it</h2>
        <p>You can download the completed project from the Microsoft Code Gallery.</p>
        <p><a class="btn btn-default" href="http://code.msdn.microsoft.com/ASPNET-MVC-Application-b01a9fe8">Download »</a></p>
    </div>
</div>

我刚刚制作了两个不同的<div class="container body-content">，一个带有灰色标题，一个用于您的内容，并从第一个中删除containerclass（该类设置the max-width 的div）

或者（正如我刚才在另一个答案中阅读了您的评论）删除类 container 并将其添加到您需要具有固定宽度的内容的任何动态 div 中

Answer 4

你可以通过容器 body-content 做到这一点 示例如下：

Answer 5

只需删除类名

来自：

div class="container body-content">

    @RenderBody() <!-- HERE GOES THE MAIN PART OF SITE -->
/div>

到：

<div>

    @RenderBody() <!-- HERE GOES THE MAIN PART OF SITE -->
/div>

有效