我正在实现简单的缩放功能，一切正常，但是 我遇到页脚后出现空白问题。
我尝试向 html 和 body 元素添加位置，但它不起作用。
如何重现:
1. Copy the below code to .html file.
2. Open in Google Chrome.
3. Press multiple times Zoom-out('+') button.
4. Goto end of page. You can find white space after footer also.
请需要帮助
<!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 + ")");
var marBot = -1*parseInt((1-sclVal)*$("#section").height()) + 'px';
console.log(marBot);
$("#section").css("margin-bottom", marBot);
}
}
};
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 + ")");
var marBot = -1*parseInt((1-sclVal)*$("#section").height()) + 'px';
console.log(marBot);
$("#section").css("margin-bottom", marBot);
}
}
};
$(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>
最佳答案
关于html - Google Chrome 中页脚 <div> 后的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26235930/