SVG with bottom 0 in footer and continues with white space

Question

SVG with bottom 0 in footer and continues with white space

Navigation

#1 by (0 votes)

1

Good afternoon I have a problem with my layout, svg is in the footer position and I can not remove the white space at the bottom of the page. I tried on the body I think not his property.

<svgclass="absolute rodape-bg" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon fill="#545353" points="0,100 100,0 100,100"/>  </svg>

.absolute{
  position: absolute;
}
.rodape-bg{
  clear: both;
  position: inherit;
}

svg {
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: 30vw;
     -webkit-transform: rotate(18.3deg);
      transform: rotate(18.3deg);
     -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
  }

html css svg

asked by anonymous 22.08.2018 / 20:39

1 answer

In descending order, remove a value from the entered number up to 0 Primefaces how to trigger the blur event and update the data

score 0 · Answer 1

Add display: block to svg. Because it is an inline element, it creates a spacing as it does in text, unlike block elements.

I only find the .absolute class unnecessary since svg already has the position: absolute property. Also the position: inherit property of the .rodape-bg class is overwriting position: absolute of svg.

body{
   margin: 0;
}

.absolute{
   position: absolute;
}
.rodape-bg{
   clear: both;
   /* position: inherit; */
}

svg {
   display: block; /* propriedade adicionada */
   position: absolute;
   z-index: 2;
   bottom: 0;
   width: 100%;
   height: 30vw;
   -webkit-transform: rotate(18.3deg);
   transform: rotate(18.3deg);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
}

<svg class="rodape-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
   <polygon fill="#545353" points="0,100 100,0 100,100"/>
</svg>