如何制作全宽 div？答案

【问题标题】：How can I make a full width div?如何制作全宽 div？
【发布时间】：2019-05-07 15:36:06
【问题描述】：

即使在身体两侧没有空间之后，我的 div 仍然偏离中心。我根据需要让 div 占据了屏幕的整个宽度，但无法使其居中。我用 margin-left 强制它，但这在其他屏幕上不起作用。有什么建议？

CSS

div {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

section {
    margin: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;

}

.div-with-bg {
    background-image: url(../images/color1.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    /*this is needed to keep image proportion good*/
    background-size: cover;
    position:relative;
    margin-left:0px;
    border-left:0px;
    padding-left:0px;
}

.div-no-sides {
    /*margin: 0px 0px 0px 0px;*/
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    /*margin-left: -5em;*/
}

HTML

<section class="hero div-no-sides" style="width:100vw">
    <div class="container div-with-bg div-no-sides wide">
        <div class="col-md-12">
            <h1>
                Heading Goes Here
            </h1>

            <p class="tagline">
                Quick. Accurate. Reliable.
            </p>
            <a class="btn btn-full" href="#about">Get A Quote Today</a>
        </div>
    </div>
</section>

【问题讨论】：

您是在问如何使 div 在页面上居中？或者您是在问如何使 div 拉伸页面的全屏。您的问题不清楚请说明？此外，您正在使用引导网格系统，但我没有看到添加引导的链接，而且您的 col-md-12 也没有包含在行类中。
@BenTegoni 我的引导链接在布局页面中。我希望 div 拉伸全屏，但是当我使用 width:100vw 时，它会使尺寸变得完美，但会将它放在右边的中心，我必须水平滚动才能看到它。
我运行上面的代码得到的结果是一个完美拉伸全屏的div，没有问题。您能否提供一个代码 sn-p 清楚地展示您的问题（您可以实际运行的问题），以便我可以看到您要正确表达的内容。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： css asp.net-mvc html asp.net-mvc-4

【解决方案1】：

HTML

<div class="container">

    <div class="row" style="height:100px; background: #fff;"> this is ok</div>
    <div class="row row-full" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>

CSS

.container{
 background: gray;
 min-height: 400px;
}

/*Can achive using vw css unit*/
.row-full{
      width: 100vw;
      position: relative;
      margin-left: -50vw;
      height: 100px;
      margin-top: 100px;
      left: 50%;
}

【讨论】：

【解决方案2】：

因此，使用您的 HTML 结构，您可以使用以下 CSS 使文本居中：

html,body{
  margin:0px;
  padding:0px;
}

.div-with-bg {
    background-image: url(../images/color1.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    /*this is needed to keep image proportion good*/
    background-size: cover;
}

.container div {
text-align:center;
}

从技术上讲，为了帮助回答您的问题，a 将始终、本机地希望成为它所占据的任何空间的完整宽度，无论它的宽度是由父节点还是页面的 body 标签限制。具体来说，因为您提到您希望文本居中，所以您需要将其包含在较低级别的 CSS div 声明中。

【讨论】：

【解决方案3】：

我将我的代码从我的索引页面移动到我的布局页面，然后它开始按预期工作。我相信在索引页面上显示的布局页面中有一个@Renderbody 是导致我的问题的原因。

【讨论】：