How can I make the html content to occupy the entire browser window?

Question

I have the below div in a html page which tries to render content from a different html page. The rendered html content occupies the entire width but not the height. what needs to be changed in the style attribute to occupy the entire height available?

Thank you!

<div>
    <embed type="text/html" style="text-align:center;width:100%;height:100%"
       src="https://app.mytest.com/common/mydocuments.html">
</div>

Answer 1

Well, there are a lot of methods to achieve this in CSS, but the approach I love to use to achieve this is using full viewport height and width.

embed {
  height: 100vh;
  width: 100vw;
}

it basically tells the browser to use the entire window for this tag.

and to make it fix you can use position: fixed;

Answer 2

For the Html content to occupy the entire page just set the min-height to 100vh.I have attached a sample code for your reference also refer the link provided for further understanding https://www.freecodecamp.org/news/html-page-width-height/

 <style> body { min-height: 100vh; max-width: 400px; margin: 0 auto; background-color:blue; } </style> <div> <h class="body">Sample Text <h> <div>