Question

我对使用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>

它可能必须对对象数据做些事情，但不确定。

Answer 1

我会尽力回答我对您问题的理解。

我认为您要实现的目标是将int内的外部页面加载到div中。由于您在div HTML标记中的页面内没有CSS，因此无法正常工作。

根据您的代码，只需在CSS中添加object选择器：

object

工作示例：

body, object {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding: 0px;
}

Answer 2

您要根据浏览器的高度和宽度设置div的高度和宽度的100％
您需要设置要在该div内加载的标签的
它与CSS有关，在下面的示例中，我使用img来可视化演示文稿
然后将#div1 img应用于类声明中的#div1

请检查以下代码：

document.onkeydown = function (e) {
    e = e || window.event;
    var key = e.which || e.keyCode;
    if (key === 65) {
        console.log('Key : ' + key);
        $("#div1").html('<img src="https://picsum.photos/200/200?random&time=1538825643321" />');
    }
    if (key === 66) {
        console.log('Key : ' + key);
        $("#div1").html('<img src="https://picsum.photos/200/200?random&time=1538825643322" />');
    }
    if (key === 67) {
        console.log('Key : ' + key);
        $("#div1").html('<img src="https://picsum.photos/200/200?random&time=1538825643323" />');
    }
    if (key === 68) {
        console.log('Key : ' + key);
        $("#div1").html('<img src="https://picsum.photos/200/200?random&time=1538825643324" />');
    }
}

body{
    background-color: #808080;
    padding:0;
    margin:0;
}
#div1 img{
    background-color: yellow;
    height: 100vh;
    width: 100vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Press : a, b, c or d</p>
<div id="div1">Test</div>

使用jquery时制作DIV 100％

2 个答案: