HTML/CSS：在 div 中设置对象的宽度和高度？答案

【问题标题】：HTML/CSS : Set width & height of object in a div?HTML/CSS：在 div 中设置对象的宽度和高度？
【发布时间】：2014-03-19 19:24:46
【问题描述】：

我在尝试使用下面的代码将 html 文件加载到 div 标签时遇到了问题；

<div id ="content" ></div>
<script>
function load_home(){
    document.getElementById("content").innerHTML='<object type="text/html" data="home.html"></object>';
}
</script>

问题是内容被加载，如下所示；

内容没有填满屏幕的宽度或高度。

制作加载的html文件，填充body宽高有什么技巧吗？

【问题讨论】：

标签： javascript html css load

【解决方案1】：

如果是object标签，设置宽高参数：

...
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" style="width:100%; height: 100%;"></object>';
...

编辑： 关于 JSFiddle http://jsfiddle.net/zYw3S/12/ 添加

#content{
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;
    height: 70vh;
}

【讨论】：

我刚刚添加了宽度和高度值，加载的内容现在填充了整个正文区域，但高度仍然混乱。
你是说文档的正文没有占据整个浏览器？我认为您需要发布更多文件。像这样一个简单的文档：<html> <body onload="load_home()"> <div id ="content" ></div> <script> function load_home(){ document.getElementById("content").innerHTML='<object type="text/html" data="home.html" style="width:100%; height: 100%;"></object>'; } </script> </body> </html> 将填满屏幕
并不是body标签不占整个页面，而是创建的object标签不占页面的宽高。我想我已经通过 style="position: absolute; height: 100%" 解决了这个问题。
编辑！我认为有效的没有！我创建了一个 jsFiddle jsfiddle.net/zYw3S，在 home.html 中只有一个带有 lorem ipsum 文本的段落元素。
好的，试试添加这个：#content{ background-color: #FFFFFF; border-radius: 10px; margin-top: 10px; height: 70vh; } vh = View Height。它是您的全视图区域的百分比。它与 % 不同，因为它不考虑父容器。

【解决方案2】：

尝试设置它的position: absolute;和top:0;left:0;bottom:0;right:0;width: 100%;height: 100%;

【讨论】：

【解决方案3】：

为什么你的 div 右侧是空的？检查您是否应用了宽度限制。但是，您可以使用 width:100% 以便 div 填充整个框。您可能必须将脚本放在另一个 div 中，并将该 div 的值设置为 100%。

【讨论】：