设置 HTML 页面和浏览器窗口的大小

我有一个 ID=“container” 的 div 元素。我想将此元素设置为浏览器窗口中可视区域的大小。我正在使用以下 JS 来这样做。

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

但是，浏览器窗口大小大于可视大小，并且出现水平和垂直滚动条。如何使我的 HTML 页面适合浏览器窗口而不需要滚动条？

编辑：

我基本上是在问，如何使文档大小与视口大小相同？

原文由 moesef 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 671

这应该工作。

 <!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>

背景颜色在那里，所以你可以看到它是如何工作的。将此代码复制到文件并在浏览器中打开它。尝试使用 CSS 看看会发生什么。

width: inherit; height: inherit; 从父元素中提取宽度和高度。这应该是默认设置，并不是真正必要的。

尝试删除 h1 { ... } CSS 块，看看会发生什么。您可能会注意到布局以一种奇怪的方式做出反应。这是因为 h1 元素正在影响其容器的布局。您可以通过在容器或主体上声明 overflow: hidden; 来防止这种情况。

我还建议您阅读 CSS Box Model 。

原文由 twaddington 发布，翻译遵循 CC BY-SA 3.0 许可协议

<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>

设置 HTML 页面和浏览器窗口的大小

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译