HTML/CSS : Set width & height of object in a div?

Question

I have ran into a problem when trying to load html files into a div tag, using the code below;

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

The problem is that the content gets loaded as seen below;

The content doesn't fill the width or height of the screen.

Any tips for making the loaded html file, fill the body width and height?

Answer 1

Set the width and height parameters if the object tag:

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

edit: With respect to the JSFiddle http://jsfiddle.net/zYw3S/12/ adding

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

Answer 2

Try to set its position: absolute; and top:0;left:0;bottom:0;right:0;width: 100%;height: 100%;

Answer 3

Why is the right side of your div empty? Check whether you have applied width restrictions. However,you can use width:100% so that the div fills the whole box. You might have to put your script inside another div and set the value of that div to 100%.