Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140131

Lots of white scrollable space after last div - resize the window is fixing it

$
0
0

I have a lot of white space after the last div (the last div-image is somewhere at the middle of page)

last div vs space remaining

What seems to somehow cure this is resizing the window and making it full again - not entirely but better nonetheless

last div vs space remaining

The markup look like this:

<div class="parent">
        <div data-enllax-ratio="0.1" class="d1"></div>
        <div data-enllax-ratio="-.1" data-enllax-type="foreground" class="d2"></div>
        <div data-enllax-ratio="0.6" data-enllax-type="foreground" class="d3"></div>
        <div data-enllax-ratio="1.4" data-enllax-type="foreground" class="d4"></div>
        <div data-enllax-ratio="1.6" data-enllax-type="foreground" class="d5"></div>
        <div data-enllax-ratio="-.2" data-enllax-type="foreground" class="d6"></div>
        <div data-enllax-ratio="1.2" data-enllax-type="foreground" class="d7"></div>
        <div data-enllax-ratio="-.3" data-enllax-type="foreground" class="d9"></div>
    </div>

The body looks somehow like this:

body {
  margin: 0;
  background-color: var(--color-bg);
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

The parent:

.parent {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: auto;
  position: relative;
}

The last two divs:

.d7 {
  background: url(/wp-content/uploads/2019/11/mock_1x.jpg);
  height: 1200px;
  margin: 0 auto;
  padding: 0;
  width: 60%;
  z-index: 200;
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 21%;
  top: 2400px;
}

.d9 {
  background: url(/wp-content/uploads/2019/11/px3.jpg);
  height: 1200px;
  margin: 0 auto;
  padding: 0;
  width: 45%;
  z-index: 100;
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 2500px;
  opacity: 0.4;
}

The enllax property is from a parallax plugin which I don't know very well - I don't really know if this has to do with my problem or it's just a CSS mistake. - the code for js plugin is here

What I am missing here? It might be a rookie mistake but I'm not a pro so this could have happened very easily.

Thank you!


Viewing all articles
Browse latest Browse all 140131

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>