Question

我正在进行简单的缩放实现，工作正常，但问题是当我放大时。页脚div位于同一个地方，缩放的div和footer之间出现了很多空白区域。

请帮助我如何在可缩放的div和页脚之间保持相同的间隙，即使你进行了放大/缩小。

我尝试了所有的位置选项，即使它没有按预期发生，请需要帮助。

<!DOCTYPE html>
<!-- saved from url=(0033)http://3dant.com/apps/graphpaper/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    function dragStart(ev) {
        ev.dataTransfer.effectAllowed = 'move';
        ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
        ev.dataTransfer.setDragImage(ev.target, 0, 0);
        return true;
    }
    function dragEnter(ev) {
        ev.preventDefault();
        return true;
    }
    function dragOver(ev) {
        return false;
    }
    function dragDrop(ev) {
        var src = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(src));
        ev.stopPropagation();
        return false;
    }

    // Zooming
    var sclVal = 1;
    var minZoom = 0.5;
    var maxZoom = 1.5;

    function ZoomIn(event) {
        if (sclVal > minZoom ) {
            sclVal = sclVal - 0.1;
            console.log(sclVal);
            if (sclVal > minZoom && sclVal < maxZoom) {
                $("#section").css("-ms-transform", "scale(" + sclVal + ")");
                $("#section").css("-webkit-transform", "scale(" + sclVal + ")");
                $("#section").css("transform", "scale(" + sclVal + ")");
            }
        }
    };

    function ZoomOut(event) {
        if (sclVal < maxZoom ) {
            sclVal = sclVal + 0.1;
            console.log(sclVal);
            if (sclVal > minZoom && sclVal < maxZoom) {
                $("#section").css("-ms-transform", "scale(" + sclVal + ")");
                $("#section").css("-webkit-transform", "scale(" + sclVal + ")");
                $("#section").css("transform", "scale(" + sclVal + ")");
            }
        }
    };

    $(document).ready(function() {

        $("#ZoomOut").click(function(event) {
            ZoomOut();

        });


        $("#ZoomIn").click(function(event) {
            ZoomIn();

        });


    });

</script>
<style>

#graph_paper {
    border: 2px solid #a1a1a1;
    height: 700px;
    width: 1340px;
}

#header {
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
}

#nav {
    line-height: 30px;
    background-color: #eeeeee;
    height: 700px;
    width: 200px;
    float: left;
    padding: 5px;
}

#section {
    width: 350px;
    float: left;
    padding: 10px;
    transform-origin: top left;
}

#footer {
    background-color: black;
    color: white;
    clear: both;
    text-align: center;
    padding: 5px;
    position: relative;
    left:10px;
}

#cellDiv2 {
    height: 500px;
    width: 350px;
    border: 1px #D3D3D3 solid;
}

td,table {
    border: 1px solid #a1a1a1;
}
</style>
</head>
<body>

    <div id="header">
        <h1>Id Card Print</h1>
    </div>

    <div id="nav">

            <table id="table1" draggable="true" ondragstart="return dragStart(event)">
                <tr>
                    <td>aaaaaaaaaa</td>
                    <td>bbbbbbbbbb</td>
                </tr>
                <tr>
                    <td>cccccccccc</td>
                    <td>dddddddddd</td>
                </tr>
            </table>

        <input id="ZoomIn" type="button" value="-" />
        <input id="ZoomOut" type="button" value="+" />
    </div>
    <div id="section">
        <table>
            <tr>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
                <td>
                    <div id="cellDiv2" ondragenter="return dragEnter(event)"
                        ondrop="return dragDrop(event)"
                        ondragover="return dragOver(event)"></div>
                </td>
            </tr>
        </table>

    </div>

    <div id="footer">Copyright ..............</div>
</body>
</html>

http://jsfiddle.net/ravikumarmaddi/z16jc6wa/1/

Answer 1

问题是转换div不会改变它的高度。

通过修改坐标空间，CSS转换可以更改受影响内容的位置和形状，而不会中断正常的文档流。本指南介绍了如何使用转换。 mdn link

一种解决方案是将ZoomIn和Zoom Out的下边距设置为

$("#section").css("margin-bottom", '-' + parseInt((1-sclVal)*$("#section").height()) + 'px');

尝试http://jsfiddle.net/z16jc6wa/2/

如何使页脚<div>相对于可缩放内容<div>？</div> </div>

1 个答案: