css3 translate3d нулевая высота 100% уничтожено

Question

Я столкнулся с проблемой, когда google не мог мне помочь. На контейнере применяется метод translate3d (0, 0, 0), который разрушает размеры внутренних контейнеров с шириной и высотой 100%. Я создал небольшой jsfiddle, чтобы продемонстрировать это. Если убрать транслируют на #page размеров правильны ... http://jsfiddle.net/11vt14nx/1/

HTML, часть

<div class="page-wrapper"> 
    <section id="page"> 
     <div class="artworkPage"> 
      <figure class="vertical-middle"> 
       <img src="asda"> 
      </figure> 
      <div class="data"> 
       <p class="description">asd</p> 
       <div class="button-group align-center"> 
        <button class="like small" data-object-id="1"> 
         <span class="icon-thumbs-up"></span> 
         <span class="value">0</span> 
        </button> 
        <button class="dislike small secondary" data-object-id="1"> 
         <span class="icon-thumbs-down"></span> 
         <span class="value">0</span> 
        </button> 
       </div> 
      </div> 
     </div> 
    </section> 
</div> 

устанавливаемых сотовый

.artworkPage { 
    figure { 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 100%; 
     width: 100%; 
     z-index: 1; 
     img { 
      position: absolute; 
      left: 0; 
      right: 0; 
      top: 0; 
      bottom: 0; 
      margin: auto; 
      max-width: 100%; 
      max-height: 100%; 
     } 
    } 
    .data { 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     width: 100%; 
     z-index: 2; 
     background: rgba($body-bg, .8); 
     @include transition(all .2s linear); 
     &.hidden { 
      @include opacity(0); 
      display: block; 
     } 
     .description { 
      font-size: 14px; 
      padding: 5px 10px; 
      margin-bottom: 0; 
     } 
    } 
} 

.page-wrapper { 
    #page { 
     white-space: nowrap; 
     @include translate3d(0, 0, 0); 
     & > div { 
      float: none; 
      white-space: normal; 
      width: 100%; 
      @include inline-block(top); 
     } 
    } 
} 

ли кто-нибудь знает, как это исправить?

Заранее спасибо

С уважением Томас :)

Answer 1

Просто добавьте высоты к этому элементу

.page-wrapper #page { 
    white-space: nowrap; 
    -moz-transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    height: 100vh 
} 

узнать больше о Sizing with CSS3's vw and vh units

.artworkPage figure { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
/* line 119, ../sass/_base.scss */ 
 
.artworkPage figure img { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
/* line 130, ../sass/_base.scss */ 
 
.artworkPage .data { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: 2; 
 
    background: rgba(239, 239, 239, 0.8); 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 
/* line 138, ../sass/_base.scss */ 
 
.artworkPage .data.hidden { 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    display: block; 
 
} 
 
/* line 142, ../sass/_base.scss */ 
 
.artworkPage .data .description { 
 
    font-size: 14px; 
 
    padding: 5px 10px; 
 
    margin-bottom: 0; 
 
} 
 
    
 
.page-wrapper #page { 
 
    white-space: nowrap; 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    height: 100vh 
 
} 
 
/* line 155, ../sass/_base.scss */ 
 
.page-wrapper #page.from-left { 
 
    -moz-transform: translate3d(-100%, 0, 0); 
 
    -webkit-transform: translate3d(-100%, 0, 0); 
 
    transform: translate3d(-100%, 0, 0); 
 
} 
 
/* line 158, ../sass/_base.scss */ 
 
.page-wrapper #page.to-right { 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 
/* line 162, ../sass/_base.scss */ 
 
.page-wrapper #page.to-left { 
 
    -moz-transform: translate3d(-100%, 0, 0); 
 
    -webkit-transform: translate3d(-100%, 0, 0); 
 
    transform: translate3d(-100%, 0, 0); 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 
/* line 166, ../sass/_base.scss */ 
 
.page-wrapper #page > div { 
 
    float: none; 
 
    white-space: normal; 
 
    width: 100%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    *vertical-align: auto; 
 
    *zoom: 1; 
 
    *display: inline; 
 
}

<div class="page-wrapper"> 
 
     <section id="page"> 
 
      <div class="artworkPage"> 
 
       <figure class="vertical-middle"> 
 
        <img src="http://images.tagseoblog.de/bilder/bild-foto/bild.jpg"/> 
 
       </figure> 
 
       <div class="data"> 
 
        <p class="description">asd</p> 
 
        <div class="button-group align-center"> 
 
         <button class="like small" data-object-id="1"> 
 
          <span class="icon-thumbs-up"></span> 
 
          <span class="value">0</span> 
 
         </button> 
 
         <button class="dislike small secondary" data-object-id="1"> 
 
          <span class="icon-thumbs-down"></span> 
 
          <span class="value">0</span> 
 
         </button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section> 
 
    </div>