Set size of HTML page and browser window

问题

I have a div element with ID="container". I want to set this element to be the size of the viewable area in the browser window. I am using the following JS to do so.

var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;

However, the browser window size is larger than the viewable size and horizontal and vertical scroll bars appear. How do I make it so that my HTML page fits into the browser window without a need for scroll bars?

EDIT:

I am basically asking, how can I make the document size the same as the viewport size?

回答1:

This should work.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: green;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                background-color: pink;
            }
            h1 {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>Hello World</h1>
        </div>
    </body>
</html>

The background colors are there so you can see how this works. Copy this code to a file and open it in your browser. Try playing around with the CSS a bit and see what happens.

The width: inherit; height: inherit; pulls the width and height from the parent element. This should be the default and is not truly necessary.

Try removing the h1 { ... } CSS block and see what happens. You might notice the layout reacts in an odd way. This is because the h1 element is influencing the layout of its container. You could prevent this by declaring overflow: hidden; on the container or the body.

I'd also suggest you do some reading on the CSS Box Model.

回答2:

You could use width: 100%; in your css.

回答3:

<html>
<head >
<title>Welcome</title>    
<style type="text/css">
#maincontainer 
{   
top:0px;
padding-top:0;
margin:auto; position:relative;
width:950px;
height:100%;
}
  </style>
  </head>
<body>
 <div id="maincontainer ">
 </div>
</body>
</html>

来源：https://stackoverflow.com/questions/9510359/set-size-of-html-page-and-browser-window

标签

html

css

resize

scrollbar