如何使元素与页面宽度一样宽，包括滚动？答案

【问题标题】：How can I make an element as wide as the page width including scrolling?如何使元素与页面宽度一样宽，包括滚动？
【发布时间】：2022-01-08 07:51:27
【问题描述】：

在下面的sn-p中，页脚占据了页面可见部分的整个宽度，但是一旦发生滚动，很明显页脚比整个页面短，因为滚动。

如何表达“使元素与整个页面一样宽，包括由于滚动而不可见的区域”的意图？

<style type="text/css" media="screen">
* {
  margin: 0;
}
footer {
  width: 100%;
  border: 1px solid black;
}
</style>
<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
  footer content
</footer>

让我感到困惑的是，据我从开发工具中得知，整个html 元素与最初可见区域一样宽；如果我向右滑动一点，然后将鼠标悬停在 Chrome 开发工具的 Elements 选项卡中的 <html> 元素上，我会看到蓝色覆盖仅覆盖视图，而不是滚动后可见的部分：

【问题讨论】：

标签： html css dom width page-layout

【解决方案1】：

问题在于“mainmain...”被视为一个单词，因为它没有间隔。添加word-wrap: break-word; 即可解决问题。

main {
    word-wrap: break-word;
}
footer {
  width: 100%;
  border: 1px solid black;
}

<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
  footer content
</footer>

【讨论】：

【解决方案2】：

问题不在于页脚没有扩展整个宽度：而是您拥有的文本元素比其容器宽。

页脚的宽度 % 由其父元素定义（在本例中是主 HTML 元素，它从屏幕获取宽度）。另一方面，文本没有被包含，可以说是“越界”。如果您在文本的父元素上隐藏溢出，则问题已得到解决。

不使用断词的一个原因是，我假设您的实际用例不是没有断点的单行文本，更有可能是超出文档宽度的图像或其他元素。

<style type="text/css" media="screen">
main {
  overflow-x: hidden; //hide the page overflow
}
* {
  margin: 0;
}
footer {
  width: 100%;
  border: 1px solid black;
}
</style>
<main>
mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain
</main>
<footer>
  footer content
</footer>

【讨论】：

main 不是 footer 的父级

【解决方案3】：

转到您的 css 代码并执行。

/* Changing a little bit of CSS code */
main {
   /* Setting The Word Warp To Break Word. */
   word-wrap: break-word;
}

干杯.. 本。

【讨论】：