仅最大化浏览器时如何制作全屏div答案

【问题标题】：How to make a div with full screen when only the browser is maximized仅最大化浏览器时如何制作全屏div
【发布时间】：2016-02-22 04:45:36
【问题描述】：

我想让我的 div 宽度为 100%，但我希望宽度是静态的，因此在重新调整浏览器大小时会出现水平滚动（当浏览器最大化时不会出现）所以我不想用width:100% 创建宽度属性，我不想从window.screen 中获取这个值，因为它给你的是全屏宽度而不是最大化的浏览器宽度所以我不想在浏览器没有最大化的时候变成这个样子

我想要这样

当浏览器最大化时会像（没有水平滚动）

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： html css fullscreen

【解决方案1】：

您 [可能] 过度复杂化了您的问题。您拥有的是具有一定宽度的背景（或 div 容器），但您不希望它超过该宽度，因此，请使用 CSS3 宽度规则：

.div_background-image-container {
    width:100%; /* of whatever the screen size*/
    min-width:320px; /* For mobile devices or a size that you need */
    max-width:800px; /* The maximum size of this image */ 
    margin:auto; /* Centre the div*/
    display:block;
}

在这个 div 中，您还可以设置背景图像并使用 contain 的 CSS3 背景大小属性设置它，其中图像将覆盖背景空间。您也可以使用cover，具体取决于哪个最适合您的情况。见http://www.w3schools.com/cssref/css3_pr_background-size.asp。

.div_background-image-container {
    background: url(fingers_in_the_air.jpg);
    background-size: contain; /* OR cover, please explore */
    background-repeat: no-repeat;
}

因此，背景容器框的最小宽度为 320 像素，最大宽度为 800 像素，在这些参数内，屏幕的宽度为 100%，因此浏览器窗口的大小或浏览器分辨率，这些约束将保存图像并根据background-size CSS 语句按比例显示。

这也避免了 Javascript 和其他事件处理，因为宽度由浏览器自动定义。

【讨论】：

【解决方案2】：

使用window.innerWidth 和screen.width（这会为您提供最大化的浏览器宽度）。使用条件来决定何时显示水平滚动条（例如通过切换 body 标记上的类）并将这段代码包装在 onresize 侦听器中。

【讨论】：