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

Posted 2023-03-05

技术标签:

【中文标题】如何使元素与页面宽度一样宽，包括滚动？【英文标题】：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> 元素上，我会看到蓝色覆盖仅覆盖视图，而不是滚动后可见的部分：

【问题讨论】：

【参考方案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;

干杯.. 本。

【讨论】：

以上是关于如何使元素与页面宽度一样宽，包括滚动？的主要内容，如果未能解决你的问题，请参考以下文章