无法去除 css 视差页面底部的空白

Question

我似乎无法摆脱此页面底部的空白。我已经尝试了常规的 padding/margin 解决方案。我认为这可能与我使用 css 透视值这一事实有关。谁能解决这个问题？

抱歉，这是我第一次在这里发帖，所以我分享了网站和代码。 http://jesseellingson.com/Reflections_Test/

<body>
<div class="parallax">
    <div class="parallax__layer parallax__layer--back">
        <img src="img/site111.png">
    </div>

    <div class="parallax__layer parallax__layer--base">
        <img src="img/site222.png">
    </div>
    <div class="parallax__layer parallax__layer--text">
        <p class="title">REFLECTIONS</p>
        <p class="year">2016</p>
        <p class="info3">March 22-28</p>
        <p class="info4">Ferry Building Gallery</p>
        <p class="info5">1414 Argyle Ave</p>
        <p class="info6">West Vancouver</p>
        <p class="info7">BC V7T 1C2</p>
    </div>
    <div class="parallax__layer parallax__layer--3">
        <img src="img/site333.png">
    </div>
    <div class="parallax__layer parallax__layer--text2">
        <p class="about">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </div>
    <div class="parallax__layer parallax__layer--4">
        <img src="img/site444.png">
    </div>
    <div class="parallax__layer parallax__layer--sm">
        <div class="icons">
            <ul class="soc">
                <li><a class="soc-facebook" href="https://www.facebook.com/CapReflections/?fref=ts"></a></li>
                <li><a class="soc-twitter" href="#"></a></li>
                <li><a class="soc-instagram soc-icon-last" href="#"></a></li>
            </ul>
        </div>  
    </div>
</div>

    body, html {
    width: 100%;
    margin: 0 auto;
}

img {
    width: 100%;
}

p {
    font-family: 'Roboto', sans-serif;
    color: black;
    background: white;
    font-size: 90px;
    text-align: center;
    align-content: center;
    margin: 0 auto;

}

.title {
    margin-top: 2%;
    width: 49%;
    font-weight: 900;
    letter-spacing: .5vw;
    font-size: 6.3vw;
}

.year {
    margin-top: 1%;
    width: 8%;
    font-size: 3vw;
    font-weight: 100;
    font-style: italic;
    padding: .2%;
    padding-right: .5vw;
}

.info {
    padding: 2%;
    margin-top: 4%;
    width: 40%;
    font-size: 4vw;
    line-height: 130%;
}

.info3, .info4, .info5, .info6, .info7 {
    padding: 1%;
    margin-top: 1%;
    font-size: 3.5vw;
    white-space: nowrap;
}

.info3 {
    margin-top: 4%;
    width: 20%;
}

.info4 {
    width: 34%;
}

.info5 {
    width: 26%;
}

.info6 {
    width: 26%;
}

.info7 {
    width: 19%;
}

.about {
    margin-top: 63%;
    width: 45%;
    padding: 4%;
    font-size: 2vw;
    text-align: left;
    line-height: 135%;
}


/*///////////////SOCIAL MEDIA ICONS////////////////*/
.icons {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    margin-top: 175%;
    padding-top: 3%;
}

@font-face {
    font-family: 'si';
    src: url('../img/socicon.eot');
    src: url('../img/socicon.eot?#iefix') format('embedded-opentype'),
         url('../img/socicon.woff') format('woff'),
         url('../img/socicon.ttf') format('truetype'),
         url('../img/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(../img/socicon.svg) format(svg);
    }
}

.soc {
/*    overflow:hidden;*/
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 13vw;
    height: 13vw;
    line-height: 13vw;
    font-size: 6vw;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    margin-right: 40px;
    color: none;
    background-color: none;
}



.soc a:hover {
    z-index: 2;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.soc-icon-last{
    margin:0 !important;
}

.soc-facebook {
    color: #3e5b98;
    background-color: #ffffff;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

.soc-facebook:hover {
    color: #ffffff;
    background-color: #3e5b98;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
.soc-facebook:before {
    content:'b';
}
.soc-twitter {
    color: #4da7de;
    background-color: #ffffff;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
}
.soc-twitter:hover {
    color: #ffffff;
    background-color: #4da7de;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
}
.soc-twitter:before {
    content:'a';
}
.soc-instagram {
    color: #9c7c6e;
    background-color: #ffffff;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
}
.soc-instagram:hover {
    color: #ffffff;
    background-color: #9c7c6e;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
.soc-instagram:before {
    content:'x';
}

/*///////////////PARALLAX///////////////*/
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
  /* ... parallax styles ... */

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer--4 {
    transform: translateZ(-.5px) scale(1.5);
/*    position: relative; top: -6150px;*/
    margin-top: 195%;
/*    top: -26%;*/
}

.parallax__layer--3 {
    transform: translateZ(-1px) scale(2);
/*    position: relative; top: -2190px;*/
    margin-top: 69%;
}

.parallax__layer--base {
    transform: translateZ(-1.5px) scale(2.5);
/*    position: relative; top: 2280px;*/
    margin-top: 45%;

}
.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
}

.parallax__layer--text {
    transform: translateZ(-2px) scale(3);
}

.parallax__layer--text2 {
    transform: translateZ(-1.3px) scale(2.3);
    }

    .parallax__layer--sm {
        transform: translateZ(-.5px) scale(1.5);
    }

Answer 1

删除

transform: translateZ(-.5px) scale(1.5);

来自你的parallax__layerparallax__layer--4层

Answer 2

on class .parallax__layer parallax__layer--4 不定义 transform
on img inside .parallax__layer parallax__layer--4 set position:绝对的；

你还必须做第二个，否则底部仍然有小间隙（在 chrome）。

Answer 3

我已经在 Firefox 和 Chrome 浏览器中检查了您的网站，Firefox 似乎没有空白问题。该问题只发生在 Chrome.

要解决此问题，请删除或覆盖以下 CSS：

/* This is your current CSS style that cause the problems*/

.parallax__layer.parallax__layer--4 {
    transform: translateZ(-.5px) scale(1.5);
}

/* You can remove above or override with this CSS */

.parallax__layer.parallax__layer--4 {
    transform: none;
}

虽然这会导致你的层从原来的地方稍微下降。它可以解决您的空白问题。希望这可以帮助你:)

Answer 4

我的视差页面也有同样的问题。（我的背景是视频。）

我偶然发现这个真的很有帮助link：https://www.proteusthemes.com/help/remove-white-space-header-footer/

我尝试减少页面多个部分的 margin-bottom。但行之有效的方法是将它添加到视频标签的 .css 的 ID 中。我尝试了几个值，最后将它设置为一个更大的负数：margin-bottom: -25rem;

现在我底部的白边没了！

无法去除 css 视差页面底部的空白

Can't get rid of whitespace at bottom of css parallax page

html

css

parallax