title: Position SVG at bottom of any screen
body: <p>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.</p>
  <p>Here is CSS what I use:</p>
  <pre><code>    .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);
          }
  </code></pre>
  <p>And there is my Html:</p>
  <pre><code>    &lt;div style=&quot;position: relative;&quot;&gt;
          &lt;div class=&quot;custom-shape-divider-bottom-1652813835&quot;&gt;
              &lt;svg data-name=&quot;Layer 1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1200 120&quot; preserveAspectRatio=&quot;none&quot;&gt;
                  &lt;path d=&quot;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&quot; class=&quot;shape-fill&quot;&gt;&lt;/path&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>When I don't have scroll this is what happens: <a href="https://i.stack.imgur.com/Kafst.png" rel="nofollow noreferrer">https://i.stack.imgur.com/Kafst.png</a></p>
  <p>When I have scroll the SVG fits at the bottom: <a href="https://i.stack.imgur.com/6GFDP.png" rel="nofollow noreferrer">https://i.stack.imgur.com/6GFDP.png</a></p>
  <p>I look with element inspector and that white space is not found inside my html document.</p>
  <p>Any sugestions please? Thanks for ur time.</p>
  <p><strong>EDIT:</strong></p>
  <p>This whats happens when delete the position relative in that div:  <a href="https://i.stack.imgur.com/pRjMt.png" rel="nofollow noreferrer">https://i.stack.imgur.com/pRjMt.png</a></p>
  <p><strong>EDIT 2:</strong>
  Added JSFiddle:
  <a href="https://jsfiddle.net/bue4m39t/1/" rel="nofollow noreferrer">https://jsfiddle.net/bue4m39t/1/</a></p>