0

我遇到了谷歌无法帮助我的问题。在容器上应用 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>

的CSS

.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);
        }
    }
}

有人知道如何解决这个问题吗？

提前致谢

问候托马斯:)

4

1 回答 1

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
}

了解有关使用 CSS3 的 vw 和 vh 单位调整大小的更多信息

.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>

于 2014-12-16T16:25:04.500 回答