javascript - 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>
任何帮助将不胜感激,如果我做错了,即使是不同的+更好的方法来做同样的事情也会很好。提前致谢!
解决方案
试试下面的代码。
<!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>
推荐阅读
- elasticsearch - 我可以从 Stormcrawler 获得哪些值/字段?
- r - 如何使用 R 闪亮绘制热图
- email - 一个人只能得到最后一条消息而不是整个历史吗?
- java - 错误:无法获取 ProductFlavor_Decorated 的未知属性“FabricApiKey”
- c - 将元素添加到有序链接列表
- kotlin-coroutines - 如何过滤 Kotlin Flow 中的列表
- colors - Monaco-Editor:仅激活某些行进行编辑
- android - java.lang.RuntimeException: 使用 EditText (number) 启动 Fragment 时调用观察者方法失败 双向数据绑定
- laravel - Laravel Inertia,带有谷歌登录的 CORS
- android - 使用参数查询 ROOM 数据库后无法让 ViewModel 显示数据(Kotlin)