Div变换后的Div容器高度太高

div container height too tall after div transform

本文关键字：Div 高度 变换      更新时间：2023-09-26

我有一个网站，有一个容器内的"页面"。页数可以是1-10，但是因为这样我就不能有一个具体的高度。

我有一个适合屏幕大小的容器，也就是div。这工作得很好，但是，当我把窗口缩小到比原来的div的高度小时，容器的高度保持不变，并留下了很多空白。

有人知道我怎么能解决这个问题吗?

My jsfiddle | jsfiddle全屏

<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 + ')'
      });
}

空白似乎是因为你只缩放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;
}

你试过溢出:隐藏;关于CSS规则的外部容器，你的不同div将加载?

overflow:hidden;

将把高度调整为子元素的高度。

检查此提琴:http://jsfiddle.net/naxus28/D5qRE/4/

您将看到外部div(紫色边框)适应于您在其内部加载的任何div。

希望这能解决你的问题

相关文章：