3

Doing a simple parallax effect based on this article. I can't understand why there is a blank space between div. This forces to adjust with top, which is not ideal. See code below:

body, html, main {
  height:100%;
}

.cd-fixed-bg {
 min-height: 100%;
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center center;
}
 
.cd-fixed-bg.cd-bg-1 {
  background:Red;
}
.cd-fixed-bg.cd-bg-2 {
  background:green;
}
.cd-fixed-bg.cd-bg-3 {
  background:blue;
}
.cd-fixed-bg.cd-bg-4 {
  background:yellow;
}

.cd-fixed-bg.cd-bg-5{
  background:orange;
}
 
.cd-scrolling-bg {
 min-height: 100%;
 background: black;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="normalize.css" rel="stylesheet">
  <link href="styleSO.css" rel="stylesheet">
  </head>
<body>
 <main>
   <div class="cd-fixed-bg cd-bg-1">
      
   </div> 
    <div class="cd-scrolling-bg cd-color-2" >
   </div> 
   <div class="cd-fixed-bg cd-bg-4">
     <h1></h1>
   </div> 
   <div class="cd-fixed-bg cd-bg-5">
     <h1></h1>
   </div> 
   <div class="cd-fixed-bg cd-bg-2">
     <h1></h1>
   </div> 
  </main>
</body>
</html>

As you can see, I am forced to do stuff like top:-73px; so there is no gap between div. I've tried with margin-top but it was not successful.

Pere
  • 850
  • 3
  • 14
  • 34

4 Answers4

4

This problem is absolutely not a whitespace problem, it is a margin problem. It is occurring because the h1 margins are sticking out of the top of your divs. To fix it, one solution is to apply overflow: auto to your divs.

Live Demo:

body, html, main {
  height:100%;
}

.cd-fixed-bg {
 min-height: 100%;
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center center;
 overflow: auto;
}
 
.cd-fixed-bg.cd-bg-1 {
  background:Red;
}
.cd-fixed-bg.cd-bg-2 {
  background:green;
}
.cd-fixed-bg.cd-bg-3 {
  background:blue;
}
.cd-fixed-bg.cd-bg-4 {
  background:yellow;
}

.cd-fixed-bg.cd-bg-5{
  background:orange;
}
 
.cd-scrolling-bg {
 min-height: 100%;
 background: black;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="normalize.css" rel="stylesheet">
  <link href="styleSO.css" rel="stylesheet">
  </head>
<body>
 <main>
   <div class="cd-fixed-bg cd-bg-1">
      
   </div> 
    <div class="cd-scrolling-bg cd-color-2" >
   </div> 
   <div class="cd-fixed-bg cd-bg-4">
     <h1></h1>
   </div> 
   <div class="cd-fixed-bg cd-bg-5">
     <h1></h1>
   </div> 
   <div class="cd-fixed-bg cd-bg-2">
     <h1></h1>
   </div> 
  </main>
</body>
</html>
Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
3

The problem is margin collapse.

Your elements have some h1 elements at the top, which have some margin by default. hat margin collapses, and the effect is like the margin was added to the div instead of the h1.

To prevent margin collapse, you can use

  1. display: inline-block.

    This prevents margin collapse.

  2. width: 100%.

    By default, inline-blocks have a shrink-to-fit width.

    width: 100% makes them cover all the containing block, like a block would do.

  3. vertical-align: middle.

    By default, elements have vertical-align: baseline, which would add some whitespace below the inline-blocks.

    Setting vertical-align to other values like top, middle or bottom fixes that.

.cd-fixed-bg {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
}


body, html, main {
  height:100%;
}
.cd-fixed-bg {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
  background:Red;
}
.cd-fixed-bg.cd-bg-2 {
  background:green;
}
.cd-fixed-bg.cd-bg-3 {
  background:blue;
}
.cd-fixed-bg.cd-bg-4 {
  background:yellow;
}
.cd-fixed-bg.cd-bg-5{
  background:orange;
}
.cd-scrolling-bg {
  min-height: 100%;
  background: black;
}
<main>
  <div class="cd-fixed-bg cd-bg-1">
  </div> 
  <div class="cd-scrolling-bg cd-color-2" >
  </div> 
  <div class="cd-fixed-bg cd-bg-4">
    <h1></h1>
  </div> 
  <div class="cd-fixed-bg cd-bg-5">
    <h1></h1>
  </div> 
  <div class="cd-fixed-bg cd-bg-2">
    <h1></h1>
  </div> 
</main>
Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • merci, @Oriol! Indeed, `

    ` was messing with the margins. I tried yoru suggestion, `display: inline-block`, but it turns out that this messes up the background image display (i don't use plain color). Seems that the suggested `overflow: auto` above fixes the problem without messing with the background image.

     – Pere Sep 12 '15 at 23:39
  • 2
    @perettxintxola Yes, both ways work because they create block formatting context roots, but each one has its own problems. See [this answer](http://stackoverflow.com/a/32301823/1529630) for a full list of ways to create BFC roots. – Oriol Sep 12 '15 at 23:42
0

Set font-size to 0 in the parent of the divs and white space now has zero height. Obviously, you will need to reset font-size back to a desirable number for the divs...

body, html, main {
  height:100%;
  font-size: 0;
}
Mike
  • 335
  • 4
  • 20
0

It could be this way

main div {
  height: 100vh;
  width: 100vw; /*optional*/
  overflow: hidden;/*optional*/
}

main div:nth-child(1) {
  background: red;
}

main div:nth-child(2) {
  background: black;
}

main div:nth-child(3) {
  background: yellow;
}

main div:nth-child(4) {
  background: orange;
}

main div:nth-child(5) {
  background: green;
}

h1 {
  margin: 0;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="normalize.css" rel="stylesheet">
  <link href="styleSO.css" rel="stylesheet">
  </head>
<body>
 <main>
   <div></div> 
      <div></div> 
     <div>
       <h1>#H1</h1>
     </div> 
     <div>
       <h1>#H1</h1>
     </div> 
     <div>
       <h1>#H1</h1>
     </div> 
    </main>
</body>
</html>
Oracio
  • 123
  • 8