我有一个JS-Draggablediv，我希望能够拖拽整个屏幕，减去页脚。另外，我也希望以后能够"全尺寸"。可拖拽对象，允许它覆盖整个屏幕(除去页脚)。
为此，我正试图使该大小的内容包装器(整个屏幕页脚)，然而，我试图从其他stackoverflow帖子遵循的尝试似乎没有工作。
这是我到目前为止的代码:
$( function() {
$(".draggable").position({
my: "center",
at: "center",
of: ".bg"
})
$( ".draggable" ).draggable({
scroll: false,
containment: ".container"
});
} );body,html {
font-family: Roboto;
font-size: 18px;
height: 100%;
width: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
width: 100%;
}
.bg {
background-image: url("http://abload.de/img/background4mqdx.jpg");
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.footer {
width: 100%;
height: 40px;
box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset;
background-color: #C2C5CA;
position: absolute;
left: 0;
bottom: 0;
}
.draggable {
width: 100px;
height: 100px;
background-color: lightgrey;
}<head>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="bg">
<div class="container">
<div class="draggable">
content
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>您试过使用:
.container {
height: calc(100vh - 40px); // screen height - footer height
}