如何将div适应较小屏幕的屏幕边缘？

Question

如何制作一个div部分，需要为较小的屏幕填充整个窗口？ div区域狭窄（就像卡片一样）。教学大纲（或屏幕快照中的常见问题解答）就是页面。 syllabus.narrow是课程表页面的特定窄卡，但这并不重要。

我需要白卡散布到屏幕的边缘（屏幕的侧面和标题的底部）。我需要它自动居中。更改边距/内边距并不能使它在所有屏幕尺寸上都居中。

这是缩小的默认CSS。

.narrow {
  width: 75%;
  margin: 25px auto;
  padding-top: 30px;
}

这是用于较小屏幕的CSS。

@media (max-width: 767px) {
    .syllabus {
      width: 100%;
    }

    .syllabus.narrow {
      width: 100%;
      padding-top: 5px;
    }
}

这是页面的html代码。

<div id="{{ page.title }}" class="offset">
  <div class="jumbotron" style="margin-top:5px;">
    <div class="syllabus narrow" style="margin-top: -25px;">
      <div class="card bg-white rounded shadow-sm py-5 py-4">
        {{ content }}
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过设置以下内容来使用viewport-relative width vw：

@media (max-width: 767px) {
    .syllabus {
      width: 100vw;
    }

    .syllabus.narrow {
      width: 100vw;
      padding-top: 5px;
    }
}

这将允许单个元素扩展超出其容器的宽度，并占据整个视口宽度。请注意，它们仍将以相同的方式定位，因此您可能还需要设置一个margin-left来将它们设置回其原始位置，或者设置position: absolute

除此之外，您需要确保父级（和任何其他祖先）全角，然后使用width: 100%。

Answer 2

您已将父级div的“ narrow”类的宽度设置为100％。

但是对于其子类别为“ card”的子div，您尚未设置width: 100%

@media (max-width: 767px) {
    .syllabus.narrow .card{
      width: 100%; 
      margin-left: 0px;
      margin-right: 0px;
      padding-top: 5px;
    }
}