Question

我有一个元素<div id="pageFooter">，我想使其变为全角（窗口宽度），所以我应用了width:100vw，但我不希望它是固定的/绝对的。应用后，结果就是：div（底部的页脚）向左稍微移动。

所以我在线搜索，然后进入this 回答。我尝试应用该样式，但并没有改变。我该如何解决？

最小的工作示例：（我使用了一些剃须刀，但是样式无关紧要。 HTML：


    <div class="FooterWrapper lang">
        <footer class="pageFooter">
            <div id="userTools" class="FooterItem">
                <div class="FooterLangSwitcher">
                    <h4>@(Stock_WebApp_v2.Resources.AppCulture.Language)</h4>
                    <hr />
                    @foreach (string value in Stock_WebApp_v2.Resources.LanguagesAvailable.ApplicationLanguages.Split(';'))
                    {
                        <h5 onclick="loc = location.href.split('/');var cul = '@(value.Split(':')[0])';var u = loc[0] + '//' + loc[2] + '/' + cul;for (var x=4;x<loc.length;x++) {u+='/'+loc[x];} window.location.replace(u);">@(value.Split(':')[1])</h5>
                    }
                </div>
            </div>
        </footer>
    </div>

CSS：

.FooterWrapper {
    width: 100vw;
}
.FooterItem {
    color:white;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}
body {
    font-family: Arial, sans-serif;
}

Answer 1

在正文上添加margin 0

body {
    font-family: Arial, sans-serif;
    margin:0;
}

https://jsfiddle.net/moh78sgd/2/

Answer 2

在您的情况下，您应申请body { margin:0;}。

要使元素的全宽或全高并适合屏幕，您必须遵循以下步骤，以避免出现意外情况：

重置您的身体，用HTML标记CSS属性，例如html,body { padding:0; margin:0;}
为避免使用“填充：值”水平或垂直滚动，请使元素“ box-sizing: border-box;”
还请确保您的元素未定位为“ position：absolute / relative / fixed;”且不要以“ top/right/bottom/left:-50px”的正负值留空格。

Answer 3

研究和尝试一些东西后，我申请了

.FooterWrapper {
width: 100%;
display: inline-block;
}

和结果（注意！我添加了一些
以确保它不是绝对位置）：

Answer 4

浏览器的默认样式可能包括为元素的父级设置的自动边距，该边距将添加到整个视口宽度，从而导致溢出。您可以尝试通过添加CSS规则来重置元素上的默认边距设置：

margin: 0;

或通过直接将style属性内联到元素上：

<div style="margin:0;"></div>

E.G。 -重置上身元素的边距：

.FooterWrapper {
  width: 100vw;
}

.FooterItem {
  color: white;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
}

body {
  font-family: Arial, sans-serif;
  /* Set body's margin to 0 to ovverride browser defaults */
  margin: 0;
}

<div class="FooterWrapper lang">
  <footer class="pageFooter">
    <div id="userTools" class="FooterItem">
      <div class="FooterLangSwitcher">
        <h4>@(Stock_WebApp_v2.Resources.AppCulture.Language)</h4>
        <hr /> @foreach (string value in Stock_WebApp_v2.Resources.LanguagesAvailable.ApplicationLanguages.Split(';')) {
        <h5 onclick="loc = location.href.split('/');var cul = '@(value.Split(':')[0])';var u = loc[0] + '//' + loc[2] + '/' + cul;for (var x=4;x<loc.length;x++) {u+='/'+loc[x];} window.location.replace(u);">@(value.Split(':')[1])</h5>
        }
      </div>
    </div>
  </footer>
</div>

宽度为100vw的Div不适合屏幕

4 个答案: