Question

我有一个小项目，我一直在努力，但现在意识到我希望我的容器填充100％的浏览器高度为800px。我面临的问题是百分比似乎不起作用....！我有一个JSFiddle，我一直致力于here

<div class="slide2" style="height:800px;">
    <div class="staff2 staff-1" data-hammer="[object Object]"></div>

    <div class="staff2 staff-2" data-hammer="[object Object]"></div>

    <div class="staff2 staff-3" data-hammer="[object Object]"></div>
</div>



.slide2{
    height:800px;
    overflow: hidden;
}
.staff2{
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: none;
    -webkit-transform-origin: 0px 0px 0px;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    width:33%;
    height:800px;
    background:red;
    float: left;
}
.staff-1{
    background:red;
}
.staff-2{
    background:blue;
}
.staff-3{
    background:yellow;
}

$('.staff2').click(function(){
    if($(this).hasClass('clicked')){
        $('.staff2').animate({width:'33%'});
    } else {
        $('.staff2').not(this).animate({width:'0%'});
        $(this).animate({width:'100%'});
    }
    $(this).toggleClass('clicked');
});

Answer 1

如果删除所有800px的实例，可以通过2个简单的更改实现此目的：

.slide2 {
height:100vh;
}

.slide2 > div {
height:100%;
}

JS Fiddle

容器不会按比例缩放

1 个答案: