如何在仅最大化浏览器时使用全屏制作div

Question

我想让我的div宽度为100％，但我希望宽度是静态的，所以在重新调整浏览器大小时会出现水平滚动（当浏览器最大化时它就不会这样了）所以我不喜欢＃39; t想要使用SELECT c.CONTINENTNAME, l.LANDNAME, l.NUMBEROFLANGUAGES FROM land l INNER JOIN continent c ON l.CONTINENT = c.CONTINENT INNER JOIN ( SELECT l2.CONTINENT, MAX(l2.NUMBEROFLANGUAGES) maxLang FROM land l2 group by l2.CONTINENT) preQuery ON l.CONTINENT = preQuery.CONTINENT AND l.NUMBEROFLANGUAGES = preQuery.maxLang 制作宽度属性，并且我不想从window.screen获取此值，因为它为您提供全屏宽度而非最大化浏览器宽度 所以当浏览器没有最大化时，我不想像这个图像

我想要这样

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

Answer 1

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

Answer 2

你[可能]过度使你的问题复杂化了。你拥有的是具有一定宽度的背景（或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;
}

从这个背景容器盒的最小宽度为320px，最大宽度为800px，在这些参数中宽度为100％，因此浏览器窗口的大小或者无关紧要。浏览器分辨率，这些约束将保留图像，它将根据background-size CSS语句按比例显示。

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