无法摆脱css视差页面底部的空白答案

【问题标题】：Can't get rid of whitespace at bottom of css parallax page无法摆脱css视差页面底部的空白
【发布时间】：2018-09-02 13:03:10
【问题描述】：

我似乎无法摆脱此页面底部的空白。我已经尝试过常规的填充/边距解决方案。我认为这可能与我使用 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);
    }

【问题讨论】：

你能创建一个 jsfiddle 或 plnkr 吗？
你在 .parallax__layer--4 上的 translateZ 弄乱了你的底部图像，删除它，你的空白就会消失
就我而言，它看起来不错 - take.ms/tpd7i 。也许这个问题出现在某些特定的屏幕分辨率上？？？

标签： html css parallax

【解决方案1】：

我在 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;
}

虽然这会导致您的图层从原始位置略微向下。它可以解决您的空白问题。希望这可以帮助你:)

【讨论】：

啊，这完全有道理！因为它无论如何都在顶层。谢谢！也许您可以解决另一个问题..左侧的空白？我尝试了一些方法来摆脱它，但无济于事。
您的解决方案似乎奏效了，尽管现在我有一点滚动故障，该图像落后于其他所有内容。知道这里发生了什么吗？

【解决方案2】：

删除

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

从你的 parallax__layer parallax__layer--4 层

【讨论】：

这似乎奏效了，虽然现在该层已经跳到其他所有东西后面了，知道为什么吗？ jesseellingson.com/Reflections_Test

【解决方案3】：

在类 .parallax__layer parallax__layer--4 上不定义 transform
在 .parallax__layer parallax__layer--4 内的 img 上设置 position: absolute;

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

【讨论】：

移除转换确实有帮助，但现在该层位于后面，知道为什么会发生这种情况吗？ jesseellingson.com/Reflections_Test

【解决方案4】：

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

我偶然发现了这个非常有用的链接：https://www.proteusthemes.com/help/remove-white-space-header-footer/

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

现在我底部的白边不见了！

【讨论】：