我对使用 jquery 有点陌生，但我想尝试一下“简单”的东西 我已经让它工作了，但我遇到的问题是当我尝试查看页面时，DIV 的宽度不是 100%，高度也不是。
当我在 div 中添加黄色背景时，我确实尝试查看错误，我可以看到 div 是 100%，但加载到 DIV 中的页面仍然不是。 所以感觉这不是 CSS 错误，而是 JS 错误。
代码不是很好，但它几乎可以工作，我尝试做的是用我有 6 个按钮的小键盘更改页面。
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0px;
padding: 0px;
}
#div1 {
background-color: yellow;
height: 100vh;
width: 100vw;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.onkeydown = function(e){
e = e || window.event;
var key = e.which || e.keyCode;
if(key===65){
$("#div1").html('<object data="http://adress1">');
}
if(key===66){
$("#div1").html('<object data="http://adress2">');
}
if(key===67){
$("#div1").html('<object data="https://adress3">');
}
if(key===68){
$("#div1").html('<object data="https://adress4">');
}
}
</script>
</head>
<body>
<div id="div1">Test</div>
</body>
</html>它可能必须对对象数据做一些事情但不确定。
最佳答案
我会尽量用我对你的问题的理解来回答。
我认为您要实现的目标是在您的 div 中以与您的 div 相同的大小加载外部页面。它不起作用，因为您在页面内插入的 object HTML 标记上没有 CSS。
根据您的代码，只需在您的 css 中添加 object 选择器:
body, object {
height: 100vh;
width: 100vw;
margin: 0px;
padding: 0px;
}
工作示例:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
body, object {
height: 100vh;
width: 100vw;
margin: 0px;
padding: 0px;
}
#div1 {
background-color: yellow;
height: 100vh;
width: 100vw;
}
</style>
<script>
document.onkeydown = function(e) {
e = e || window.event;
var key = e.which || e.keyCode;
if (key === 65) {
$("#div1").html('<object data="https://css-tricks.com">');
}
if (key === 66) {
$("#div1").html('<object data="https://mongoosejs.com">');
}
if (key === 67) {
$("#div1").html('<object data="https://symfony.com">');
}
if (key === 68) {
$("#div1").html('<object data="https://jquery.com">');
}
}
</script>
</head>
<body>
<div id="div1">click a - b - c - d</div>
</body>关于javascript - 当我使用 jquery 时制作一个 DIV 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52678524/