如何使元素与页面宽度（包括滚动）一样宽？

Question

在下面的代码片段中，页脚占据了页面 visible 部分的整个宽度，但是一旦滚动发生，页脚显然比整个页面，因为滚动。

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

<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 开发工具的元素选项卡中的 <html> 元素上，我会看到蓝色-ish 覆盖仅覆盖视图的原始部分，而不是滚动后可见的部分：

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

Answer 2

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

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

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

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

Answer 3

转到您的 css 代码并执行。

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

干杯.. 本.

如何使元素与页面宽度（包括滚动）一样宽？

How can I make an element as wide as the page width including scrolling?

html

css

dom

width

page-layout