javascript - div 变换后 div 容器高度太高

Question

我有一个在容器内有“页面”的网站。页数可以是 1-10，但因此我不能有特定的高度。

我的容器适合屏幕大小，也就是 div。这很好用，但是，当我将窗口缩小到小于原始 div 的高度时，容器的高度保持不变并留下很多空白区域。

有谁知道我该如何解决这个问题？

My jsfiddle | jsfiddle full screen

HTML

<div id="container">
    <div id="zoom">
        <div id="formform">
            <div class="formContainer"></div>
            <div class="formContainer"></div>
            <div class="formContainer"></div>
        </div>
    </div>
</div>

CSS

#container {
    display:block;
    padding:15px;
    width:100%;
    margin-top:10px;
    border:1px dashed grey;
}
#formform::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formform {
    display:block;
    position:relative;
    width:940px;
    left:50%;
    margin-left:-470px;
    border:0px solid red;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    transform-origin: top center;
    -ms-transform-origin: top center;
}
.formContainer {
    position:relative;
    margin : 0 auto 15px auto;
    width:940px;
    padding:0;
    height:1178px;
    border:1px solid blue;
}

JS

zoomProject(0);

$(window).resize(function (e) {
    zoomProject(0);
});

function zoomProject(percent) {
    $maxWidth = $("#zoom").width();

    if (percent == 0) percent = $maxWidth / 920;

      $("#formform").css({
        'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + ')'
      });
}

Answer 1

空白似乎是因为您只缩放了 x 轴，您应该也缩放 y 轴以保持纵横比

  $("#formform").css({
    'transform': 'scale(' + percent + ', '+percent+)',
        '-moz-transform': 'scale(' + percent + ', '+percent+)',
        '-webkit-transform': 'scale(' + percent + ', '+percent+)'
});

更新:CSS

 #container {
    display:block;
    padding:15px;
    width:100%;
    margin-top:10px;
    border:1px dashed grey;
}
#formform::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formform {
    display:block;
    position:relative;
    width:940px;

    border:0px solid red;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    transform-origin: top center;
    -ms-transform-origin: top center;
}
.formContainer {
    position:relative;
    margin : 0 auto 15px auto;
    width:940px;
    padding:0;
    height:1178px;
    border:1px solid blue;
}