Position SVG at bottom of any screen-CodePudding

I am trying to position a SVG at bottom in any screen, but I can't do it in screens without scrollbar. I tried some changes but nothing seems work.

Here is CSS what I use:

    .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);
        }

And there is my Html:

    <div style="position: relative;">
        <div >
            <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" ></path>
            </svg>
        </div>
    </div>

When I don't have scroll this is what happens: https://i.stack.imgur.com/Kafst.png

When I have scroll the SVG fits at the bottom: https://i.stack.imgur.com/6GFDP.png

I look with element inspector and that white space is not found inside my html document.

Any sugestions please? Thanks for ur time.

EDIT:

This whats happens when delete the position relative in that div: https://i.stack.imgur.com/pRjMt.png

EDIT 2: Added JSFiddle: https://jsfiddle.net/bue4m39t/1/

CodePudding user response：

to move an element out of flow and position it depending of the viewport use: 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" ></path>
            </svg>

CodePudding user response：

Try this:

html, body {height: 100vh;}

CodePudding user response：

Remove position: relative from the first div. You're creating a conflict from the top level down. If you remove that, you'll notice your svg is positioned absolutely as intended. If you need that top-level div to display differently, don't do it inline: make a class for it and style as needed to fit the rest of your design.

.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 >
  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 >
        <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" ></path>
        </svg>
    </div>