我正在嘗試將 SVG 放置在任何螢屏的底部，但我無法在沒有滾動條的螢屏中執行此操作。我嘗試了一些更改，但似乎沒有任何效果。
這是我使用的 CSS：
.custom-shape-divider-bottom-1652813835 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
z-index: -1;
}
.custom-shape-divider-bottom-1652813835 svg {
position: relative;
display: block;
width: calc(128% 1.3px);
height: 600px;
}
.custom-shape-divider-bottom-1652813835 .shape-fill {
fill: var(--svg-color);
}
還有我的 HTML：
<div style="position: relative;">
<div class="custom-shape-divider-bottom-1652813835">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
當我沒有滾動時，會發生這種情況：https ://i.stack.imgur.com/Kafst.png
當我在底部滾動 SVG 時：https ://i.stack.imgur.com/6GFDP.png
我用元素檢查器查看，在我的 html 檔案中找不到空格。
請問有什么建議嗎？謝謝你的時間。
編輯：
洗掉該 div 中的相對位置時會發生這種情況： https ://i.stack.imgur.com/pRjMt.png
編輯 2： 添加 JSFiddle： https ://jsfiddle.net/bue4m39t/1/
uj5u.com熱心網友回復：
將元素移出流動并根據視口使用定位它： position: fixed;
svg {
position: fixed;
bottom: 0;
}<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>uj5u.com熱心網友回復：
試試這個：
html, body {height: 100vh;}
uj5u.com熱心網友回復：
position: relative從第一個 div 中洗掉。您正在從頂層向下創建沖突。如果您洗掉它，您會注意到您的 svg 完全按預期定位。如果您需要該頂級 div 以不同方式顯示，請不要行內：為它創建一個類并根據需要設定樣式以適應您的設計的其余部分。
.container {
display: flex;
position: relative;
flex-direction: column;
margin: 0 auto;
padding: 0;
height: 100vh;
}
.text {
color: red;
}
.custom-shape-divider-bottom-1652813835 {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
line-height: 0;
transform: rotate(180deg);
z-index: -1;
}
.custom-shape-divider-bottom-1652813835 svg {
bottom: 0;
display: block;
width: calc(128% 1.3px);
height: 600px;
}
.custom-shape-divider-bottom-1652813835 .shape-fill {
fill: var(--svg-color);
}<div class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat dolores suscipit ipsam enim porro atque consequuntur ab a
dipisci alias, minima corporis optio itaque assumenda magni iure illo nam cum asperiores, minus unde aut nulla ipsum vel magnam?
Sequi, quia dolor reiciendis totam pariatur deleniti illum omnis tempora atque explicabo blanditiis maxime perferendis officiis
repudiandae asperiores, harum est qui nemo soluta beatae accusantium minus exercitationem excepturi et? Voluptatum obcaecati voluptate fugit
perspiciatis non exercitationem amet consequuntur quas dicta tempora porro iure voluptatibus, sed ipsa consequatur dolores quam
necessitatibus dignissimos et. Eveniet ducimus, ipsam tenetur inventore veniam est error iure molestias aspernatur!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat dolores suscipit ipsam enim porro atque consequuntur ab a
dipisci alias, minima corporis optio itaque assumenda magni iure illo nam cum asperiores, minus unde aut nulla ipsum vel magnam?
Sequi, quia dolor reiciendis totam pariatur deleniti illum omnis tempora atque explicabo blanditiis maxime perferendis officiis
repudiandae asperiores, harum est qui nemo soluta beatae accusantium minus exercitationem excepturi et? Voluptatum obcaecati voluptate fugit
perspiciatis non exercitationem amet consequuntur quas dicta tempora porro iure voluptatibus, sed ipsa consequatur dolores quam
necessitatibus dignissimos et. Eveniet ducimus, ipsam tenetur inventore veniam est error iure molestias aspernatur!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat dolores suscipit ipsam enim porro atque consequuntur ab a
dipisci alias, minima corporis optio itaque assumenda magni iure illo nam cum asperiores, minus unde aut nulla ipsum vel magnam?
Sequi, quia dolor reiciendis totam pariatur deleniti illum omnis tempora atque explicabo blanditiis maxime perferendis officiis
repudiandae asperiores, harum est qui nemo soluta beatae accusantium minus exercitationem excepturi et? Voluptatum obcaecati voluptate fugit
perspiciatis non exercitationem amet consequuntur quas dicta tempora porro iure voluptatibus, sed ipsa consequatur dolores quam
necessitatibus dignissimos et. Eveniet ducimus, ipsam tenetur inventore veniam est error iure molestias aspernatur!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat dolores suscipit ipsam enim porro atque consequuntur ab a
dipisci alias, minima corporis optio itaque assumenda magni iure illo nam cum asperiores, minus unde aut nulla ipsum vel magnam?
Sequi, quia dolor reiciendis totam pariatur deleniti illum omnis tempora atque explicabo blanditiis maxime perferendis officiis
repudiandae asperiores, harum est qui nemo soluta beatae accusantium minus exercitationem excepturi et? Voluptatum obcaecati voluptate fugit
perspiciatis non exercitationem amet consequuntur quas dicta tempora porro iure voluptatibus, sed ipsa consequatur dolores quam
necessitatibus dignissimos et. Eveniet ducimus, ipsam tenetur inventore veniam est error iure molestias aspernatur!
</div>
<div class="custom-shape-divider-bottom-1652813835">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/477306.html