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?
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.
You could use width: 100%;
in your css.
You could try:
<html>
<head>
<style>
#main {
width: 500; /*Set to whatever*/
height: 500;/*Set to whatever*/
}
</style>
</head>
<body id="main">
</body>
</html>
<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>
Source: Stackoverflow.com