How do I control the size of html window?

2019-09-19 07:09发布

问题:

I would like to control the size (width and height) of an html window page. I would like the page to be small like a popup window. I would like the properties in the same html document to control the size of the browser without having to make a javascript link in another page.. Below is what I did to control the size of the document, but it didn't work... Help!

<!DOCTYPE html>
<html>
<head>
<link type="text/css" />

<style type="text/css">

html
{height: 500px;
width:500px;
margin:0;
padding:0;
    }
    body
    {height: 500px;
width:500px; margin:0;
overflow: hidden;
padding:0;  
        }
        .container
        {height: 500px;
width:500px; margin:0;
overflow: hidden;
padding:0;}

</style>

</head>
<body>

<div class="container">This is it.</div>


</body>
</html>

回答1:

You can do this by adding some JavaScript.

   function ReSizeIt(){
//window.moveTo(0,0);
window.resizeTo(300,200)
}
window.on_load=ReSizeIt;
window.onresize=ReSizeIt;


回答2:

Did you expect like this....

<style type="text/css">

html
{height: 500px;
width:500px;
margin:0;
padding:0;
    }
    body
    {height: 500px;
width:500px; margin:0;
overflow: hidden;
padding:0;  
        }
        .container
        {height: 500px;
width:500px; margin:0;
overflow: hidden;
padding:0;}

</style>
<script>
function myFunction(){
    myWindow = window.open(window.location.href, "", "width=350, height=350"); window.close(); // Opens a new window
}
</script>
</head>
<body>

<div class="container">This is it.</div>
<button onclick="myFunction()">Click here</button>
</body>
</html>


标签: html css window