Why is the iframe not taking up the entire page?-CodePudding

I'm trying to get https://vscode.dev/ to pop up and take up the entire page when I click on the icon, but instead it seems to be only taking up the top part of the page. how can i fix this?

    var div = document.getElementById("content");          
    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }
    document.getElementById("vscode").height = "100%";
    document.getElementById("vscode").width = "100%";
}```

CodePudding user response：

Elements are not 100% height by default and child elements are dependent on the parent height.

So you need to set the height of the parents including html and body elements to 100% height if you want a child to be 100% height.

html, body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
}

#vscode {
 width: 100%;
 height: 100%;
 border:0
}

<iframe src="https://vscode.dev/" id="vscode"/>

Additionally, you could use 100vh