如何让SVG波浪占满屏幕宽度并固定在页面底部？

要解决你的问题，只需调整footer和SVG的CSS样式，以下是具体步骤和完整代码：

核心调整要点 #

• 清除footer的默认边距，设置固定定位让它贴在底部
• 让SVG自适应100%宽度，同时移除行内元素带来的底部间距

完整实现代码 #

<footer>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#e7008a" fill-opacity="1" d="M0,128L40,133.3C80,139,160,149,240,128C320,107,400,53,480,69.3C560,85,640,171,720,170.7C800,171,880,85,960,42.7C1040,0,1120,0,1200,32C1280,64,1360,128,1400,160L1440,192L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
  </svg>
</footer>

<style>
/* 重置footer默认样式并固定到底部 */
footer {
  margin: 0;
  padding: 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 让SVG自适应满宽并移除底部间距 */
footer svg {
  width: 100%;
  height: auto;
  display: block; /* 消除行内元素基线对齐产生的间距 */
}
</style>

关键说明 #

1. position: fixed; bottom: 0：强制footer固定在视口底部，不会随页面滚动偏移
2. width: 100%：确保footer和SVG横向铺满整个屏幕
3. display: block：SVG默认是inline-block元素，会产生底部留白，设置为块级元素可以彻底消除这个间距
4. height: auto：保持SVG原始宽高比例，避免拉伸变形导致波浪形态失真

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