缩小网页以适应内容

Question

我正在改造一个简单的网站，以便它可以 运行 在拇指驱动器上，也就是不涉及服务器。

在原始页面上我有一个“select”控件，它会执行一个脚本来读取文件并加载图像和一些文本。

因为我无法从客户端的电脑上加载文件，所以我把所有的信息都放在了页面上，每个条目都在一个单独的 div 中，每个条目都有一个唯一的 id，我正在使用 style.visible = "hidden" 和 "visible" 隐藏我不想看到的，显示我想看的。

问题是，页面保持相同的大小（长度），就好像每个 div 都是可见的，而 space 被我隐藏的 div 占据了未发布。

如何让隐藏的 div 放弃他们的 space？

这是原始页面：https://www.vintagebankantiques.net/people.html

Answer 1

css 规则如

.class-of-divs{
    min-width: 100%
}

或者可能

.class-of-divs{
    min-width: 100vw
}

应该有帮助。没有 JS fiddle 之类的就很难多说了。

这些规则的作用是说那些 divs 必须都是页面宽度的 100%，并且不应根据其他 divs 的存在而改变大小.

您可能遇到的一个问题是 divs 仍然会被他们的邻居移动位置。为防止这种情况，您可以尝试设置 display: none 而不是 visible: hidden。主要区别在于可见性为 hidden 的 div 仍会影响页面布局。 div 显示 none 不影响页面布局。