1. 首頁
  2. 問答
  3. 無法擺脫在CSS視差頁面底部的空白

無法擺脫在CSS視差頁面底部的空白

2016-02-28 97 views
0

我似乎無法擺脫頁面底部的空白。我試過了常規的填充/邊距解決方案。我認爲這可能與我使用css透視值的事實有關。任何人都可以解釋這一點？無法擺脫在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); 
    }

來源

2016-02-28 Jesse Ellingson

+0

你可以創建一個jsfiddle或plnkr嗎？ – martin

+0

您的translateZ on .parallax__layer - 4正在搞亂底部圖像，刪除它並且您的空白消失 – reinder

+0

在我的情況下，它看起來很好 - http://take.ms/tpd7i。也許這個問題出現在一些特定的屏幕分辨率？ –

回答

0

我檢查了您的網站在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; 
}

雖然這會導致你的層從原來的地方略有下降。它可以解決你的空白問題。希望這可以幫助你:)

來源

2016-02-28 08:57:53

+0

啊，完全合理！因爲它無論如何都在頂層。謝謝！也許你可以解決另一個問題..左側的空白處？我已經嘗試了幾件事情來擺脫這一無濟於事。 –

+0

你的解決方案似乎已經奏效，雖然現在我有一些滾動故障，其中的圖像落後於其他任何東西。任何想法這裏發生了什麼？ –

0

刪除

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

- 4層

來源

2016-02-28 08:48:05 MarkP

+0

這似乎奏效了，雖然現在這層已經跳到一切背後了，爲什麼？ http://jesseellingson.com/Reflections_Test/ –

0
  • 上類.parallax__layer parallax__layer - 4沒有定義上IMG變換
  • 內部.parallax__layer parallax__layer - 4設置位置：絕對;

你還必須做第二個，否則你仍然有一個小的差距在底部（在鉻）。

來源

2016-02-28 08:56:48

+0

刪除轉換確實有幫助，但現在該圖層位於後面，任何想法可能會發生這種情況？ http://jesseellingson.com/Reflections_Test/ –

相關問題

 相關問題