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

我创建了一个asp.NETMVC站点，它基于Microsoft提供的默认设计/视图。所以看起来很像

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

我想做的是：

为什么我不能：

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

<div class="container body-content">

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

</div>

@RenderBody（）

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

• 我无法删除“最大宽度”，因为我想保留视图的其余部分 它现在所在的地方
• 我无法修改所有视图并在其中添加一些 具有“最大宽度”并从中删除“最大宽度”的标记 “.container”。也许我可以，但那会是太多的工作

---

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

您可以尝试拆分内容页。

---

grey Contoso大学将是它自己的div，您可以通过保持第二个div与原始css的完整性来更改任何内容。

基本上不是此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>

康托索大学
欢迎来到康托索大学

Contoso大学是一个示例应用程序
演示如何在应用程序中使用实体框架6
ASP.NETMVC5Web应用程序。

从头开始建造
您可以按照ASP.NET网站上教程系列中的步骤构建应用程序


下载它
您可以从Microsoft代码库下载已完成的项目

您可以使用：

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

康托索大学
欢迎来到康托索大学

Contoso大学是一个示例应用程序
演示如何在应用程序中使用实体框架6
ASP.NETMVC5Web应用程序。

从头开始建造
您可以按照ASP.NET网站上教程系列中的步骤构建应用程序


下载它
您可以从Microsoft代码库下载已完成的项目

我刚刚做了两个不同的

一个是灰色标题，另一个是内容，并从第一个类中删除

容器
类（该类设置
div的最大宽度
）

或者（正如我刚才在另一个答案中读到您的评论）删除类
容器
，并将其添加到任何dinamic div中，其中的内容需要具有固定的宽度
这有点粗糙，但它对我有效。它基本上是创建一个与当前灰条高度相同的伪元素，并将其设置为全宽灰条

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

您可以通过容器主体内容来实现
示例如下：

只需删除类名即可

发件人：

div class="container body-content">

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

div class=“容器体内容”>
@RenderBody（）
/div>

致：


@RenderBody（）
/div>

你是说我应该把它放在“.container”div外面？这将很难实现，“Contoso university”div也是由@RenderBody（）渲染的，因此我无法从中执行此操作。您可以尝试将宽度设置为100%以上，但我不建议您执行此操作，除非您确实无法执行其他操作，否则将该div设置为100%主体宽度的目的是什么？这仅仅是为了将背景延伸到视口边缘吗？@Paulie_D我不知道视口边缘是什么，但最终的效果应该是这样的：然后是的，你可以-我想创建多个该类型的div（全宽）。高度应自动适应此分区中文本的高度。您的方式可行，但太“棘手”；）在这种情况下，您可能需要将容器设置为100%宽度，然后分别重置所有内部件的宽度。
div class="container body-content">

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

<div>

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