Menu
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?
381
The resizeTo() method is used to resizes a window to the specified width and height. Parameter Values: width: Sets the width of the window, in pixels. height: Sets the height of the window, in pixels.
However, with no width value provided for the HTML element, setting the width of the body element to 100% results in full page width. This can be counterintuitive and confusing. For a responsive full page height, set the body element min-height to 100vh.
Prevent Browser Resize Css CSS can be used to prevent browser resizing. By using the max-width property, you can set a maximum width for the browser window. If the browser window is resized to be smaller than the max-width, the browser will automatically adjust the size of the elements on the page.
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.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
