我正在尝试制作可拖动的div，该div可以拖动到屏幕的边界，但不能再拖动了。我将可拖动部分放下，但实际的容器不会明智地填充屏幕高度，而仅明智地填充宽度。
有什么办法解决吗？我希望它能适应所有屏幕尺寸，而不是设置px值，
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
#divcontainer{
border: 1px solid lightgray;
width: 100%
height: 100%
}
#makeitmove{
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", scroll: false} );
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 200%;">
<div id="makeitmove">Calculator
</div>
</div>
</body>
</html>
任何帮助都将受到高度赞赏，如果我做错了所有事情，即使采用不同的更好的方式来做同样的事情也将是很好的。预先感谢！
答案 0 :(得分：1)
尝试下面的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
#divcontainer{
border: 1px solid lightgray;
width: 100%
height: 100%
}
#makeitmove{
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 100vh;
height: 100vh;
border: 1px solid grey;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", scroll: false} );
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 200%;">
<div id="makeitmove">Calculator
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
唯一忘记的是其父高
html, body{
height:100%;
margin:0;
}
请注意，100%表示从父级继承100％的高度。如果您不声明父母的身高，那将毫无意义。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
html, body{
height:100%;
margin:0;
}
#divcontainer{
border: 1px solid lightgray;
width: 100%
height: 100%
}
#makeitmove{
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", scroll: false} );
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 200%;">
<div id="makeitmove">Calculator
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
如果是这种情况，您是否要增加容器的高度，请执行以下操作： 您只需在div内联属性中更改高度
'<div id="divcontainer" style="height: 200%;">'
到
'<div id="divcontainer" style="height: 100vh;">'
代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
#divcontainer{
border: 1px solid lightgray;
width: 100%;
height: 1000%;
}
#makeitmove{
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", scroll: false} );
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 100vh;">
<div id="makeitmove">Calculator
</div>
</div>
</body>
</html>
否则，您是否想增加容器和可拖动div的高度，然后执行Banshi L. Dangi张贴的内容。
答案 3 :(得分：0)
首先，当您未设置父级的高度时，诸如％之类的计算值将不起作用。
您需要设置html和body的高度才能使它起作用
html,body{
height:100vh; //or % either way it works
}
#divcontainer{
border: 1px solid lightgray;
width: 100%;
height: 100%;
}
父级的vh或％ 在这里查看小提琴http://jsfiddle.net/x2kouLc0/2/
答案 4 :(得分：0)
请参见下文，我更改了2处小事情：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options withoutInput" id="option1"><span>Hello<br>World</span></div>
<div class="options withoutInput" id="option2"><span>Goodbye</span></div>
<div class="options withoutInput" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options withoutInput" id="option4"><span>Fine</span></div>
<div class="options withInput" id="option5"><span>Okay</span></div>
</div>
</body>
</html>和height: 100%分别设置html，以确保您的画布充满整个浏览器窗口，并且body的{{1}}和width属性的分号，这意味着这些分号没有被应用。
height
答案 5 :(得分：0)
使用此选项删除边距。 代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
html, body{
height:100%;
margin:0;
}
#divcontainer{
border: 1px solid lightgray;
width: 100%
height: 100%
}
#makeitmove{
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", scroll: false} );
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 100vh;">
<div id="makeitmove">Calculator
</div>
</div>
</body>
</html>