如何让元素宽度适配页面总宽度（包含滚动可见的溢出区域）

• 你遇到的问题根源是：页面里<main>的超长内容没有自动折行，超出了初始视口宽度，此时页面的实际总宽度是由溢出的子元素撑开的，但<html>、<body>这类根级块元素默认的width: 100%是相对于初始视口计算的，不会自动被子元素的溢出宽度撑大，所以给footer设置width: 100%就只能拿到初始视口的宽度，自然跟不上溢出后的总页面宽度。
• 开发者工具里hover <html>元素只高亮初始视口，也是这个原因：<html>元素本身的宽度确实就是初始视口宽度，溢出的内容属于「溢出内容区域」，不属于<html>元素本身的盒模型宽度范围。

方案1：给body设置最小宽度适配内容宽度（推荐） #

给<body>设置min-width: fit-content，让body的宽度至少等于它内部内容的总宽度，这样根级元素的宽度就会和页面实际总宽度对齐，footer的100%宽度就会基于这个总宽度计算：

body {
  min-width: fit-content;
}

修改后的完整代码示例：

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

如果需要兼容旧版浏览器，可以把fit-content替换为具体的最小宽度值，比如你确定页面内容最小宽度是1200px就写min-width: 1200px。

方案2：给footer单独设置最小宽度匹配内容 #

如果不想改动body的样式，也可以直接给footer设置和页面最宽内容一致的最小宽度：

footer {
  min-width: max-content; /* 也可以直接写你页面内容的实际最小宽度数值 */
  border: 1px solid black;
}

• 如果你的页面内容是动态生成的，推荐用方案1，不需要手动维护宽度数值，浏览器会自动根据内容计算总宽度。
• 注意如果页面有其他固定宽度的元素，要保证min-width的取值不小于所有子元素的最大宽度，才能保证覆盖完整的页面宽度。

内容的提问来源于stack exchange，提问作者Enlico