网站宽度始终适合浏览器页面宽度的 100%答案

【问题标题】：Width of website to always fit 100% of browser page width网站宽度始终适合浏览器页面宽度的 100%
【发布时间】：2014-08-25 02:57:53
【问题描述】：

我是一名专业的 3D 艺术家，但我最近一直在尝试从头开始为自己创建一个网站。我的需求非常简单 - 一个由背景图像和缩略图组成的宽屏网站，一旦点击，就会加载一个覆盖弹出窗口，显示有关该特定内容的更多信息。弹出式覆盖不是这里的问题。

我当前的问题是我需要我的页面始终为浏览器宽度的 100%，这意味着它必须缩放 - 以及其中的所有内容（缩略图）。我在 1920x1080 的屏幕上创建了我的第一次尝试，结果非常完美，但是 - 当我将它加载到具有 1366 屏幕的笔记本电脑上时，它只显示了整页的一部分，并给了我滚动条查看其余部分。

我通过 px 放置缩略图，因为我从 Photoshop 获得了值，但我知道我的需求只能通过 % 来实现 - 我该如何克服这个问题？

这是我的设置http://i.imgur.com/ZdgTRYk.jpg

灰色是浏览器窗口红色是背景绿色是满足

一切都应该以相同的速度扩展。

这是我的 HTML

<body>

<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>

</body>

和我的 CSS

#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}

非常感谢我在这方面可能得到的任何帮助。

谢谢

艾略特

【问题讨论】：

如果你可以把它放在jsfiddle.net 中，调试起来会容易得多

标签： html browser width scale

【解决方案1】：

在style.css中使用

#background{
    width: 90%;
    background: red;
}

/*thumbnails*/

#thumbnails{
    display: inline-block;
    margin-left: 10%;
    vertical-align:text-bottom;
}

【讨论】：

【解决方案2】：

如果您将页面的 body 和 html 元素设置为

CSS：

html, body 
{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

这将防止滚动条出现，同时保持屏幕的完整宽度和高度，无论分辨率如何。至于您的缩略图，如果您有一定数量的缩略图，那么您可以将缩略图的宽度设置为 10% 宽度和高度，边距为：1%;，这将允许您容纳大约 64 个缩略图，但它们如果用户的分辨率很差，就会变小。

.thumbnail
{
    position: relative;
    display: inline-block;
    width: 10%;
    height: 10%;
    margin: 1%;
}

编辑 ------------------

使用像这样的大缩略图，您可以使它更像这样：

.thumbnail
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 20%;
    margin: 5%%;
}

【讨论】：

如果你想在你的背景和浏览器窗口之间有一个小的缓冲区，这将需要更多的优化，包括一个设置为 100% 宽度和高度的包装器类，它使用轻微的填充来抵消你的内容。

【解决方案3】：

好的，对于你的#background，你可以使用这个css来缩放浏览器：

#background{
    width: 100%;
    background: red;
}

对于您的缩略图，我不太了解您希望它们如何放置，但根据您的图像，您需要将它们内联：

#thumbnails{
    display: inline-block;
    margin-left: 15%;
}

边距百分比可能因您的需要而异。

【讨论】：