我有元素& ltdiv id = " pageFooter " & gt，我想讓它全寬(窗口寬度)，所以我應用寬度:100vw，我不希望它是固定的/絕對的。應用后，結果是這樣的:div(底部的頁腳)稍微向左移動。

所以我在網上搜索，找到了這個 回答。我嘗試應用這種風格，但沒有任何改變。我該怎么修？

最小工作示例:(我使用了一點剃刀，但這與風格無關。 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;
}

在正文上添加邊距0

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

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

在您的情況下，您應該應用body { margin:0；}.

要使全寬或全高成為一個元素并適合屏幕，您需要遵循以下步驟以避免意外情況:

重置你的body，html標簽CSS屬性像html，body { padding:0；邊距:0；} 為了避免使用“padding: value”進行水平或垂直滾動，請將元素設置為“box-sizing:border-box；” 還要確保您的元素沒有使用“位置:絕對/相對/固定；”并且不按“上/右/下/左:-50px”的正值或負值留空格。 在研究和嘗試了一些東西后，我申請了

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

而結果(注意！我補充了一些，以確保它不是絕對位置):

瀏覽器的默認樣式可能包括設置為元素父級的自動邊距，它將被添加到整個視口寬度，從而導致溢出。 您可以嘗試通過添加CSS規則來重置元素的默認邊距設置:

margin: 0;

或者將樣式屬性直接內聯到元素上:

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

例如，重置父body元素的邊距:

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

我今天在做我的兼職項目時遇到了這個問題。我找了很久，但一無所獲

但我解決了這個問題后，嘗試應用寬度:100%的身體。 我認為這個問題是由滾動條引起的。

這是我的測試: 添加寬度:100vw到主體

添加51個第1部分

再添加一個div 2，就會出現x滾動條和y滾動條

然后將屬性-寬度:100vw更改為寬度:100% 3， 和x滾動條消失

所以我覺得可能是width: 100vw不適合屏幕的原因

這就是我所想的。四 也許能幫到你。