html - 缩放时适合 HTML 页面

Question

我想在缩放时尝试使 html 页面适合我的屏幕。我无法详细说明，或者我不知道如何解释：打开此站点http://www.airsoftgent.be/并尝试缩小，然后您就会明白我的意思了。

请帮帮我！！

谢谢你

score 1 · Accepted Answer

情况：

我知道你想做什么。几个月前，我尝试做同样的事情，并取得了成功。

你必须明白我不能只给你一些基本的代码。然后尝试自己实现它们，如果有问题就问。

我将尝试根据我自己的网站进行解释。

首先，我有一个带有页眉、主页和页脚的普通 HTML 页面。标题现在并不重要。

让我们从添加一个wrap开始，将它放在main 和 footer周围。像这样：

    <div id="wrap"> 
      <div id="main">
        <p>Some Text Here</p>
      </div>
  
      <div id="footer">Copyright</div>
    </div>

现在对于 CSS 文件：

我们开始 bij 添加body和html标签：

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

body和html标签必须包含这些项目！如果不这样做，它将无法正常工作！

然后我们添加wrap（在 CSS 中），使其包含以下代码，您可以弄乱填充、边距和宽度以使其看起来更好，但现在只有这个：

   #wrap{
      height: auto;
      min-height: 100%;
      height: 100%;
      position: relative;
    }

解释：

最小高度是为了让舒尔的高度总是100%，即使没有太多的文字。

位置必须是相对的！对于包装内的所有其他标签/类，位置必须是绝对的！但我稍后会解释。

对于Height: auto我们需要另一个解释：因为 IE 并不总是能识别height: 100%，所以你必须使用auto。

现在最后但同样重要的是：我们必须在 CSS 文件中添加main和footer ：

    #main{
      height: 100%;
      position: absolute;
      bottom: 15px;
    }

    #footer{
      position: absolute;
      bottom: 0;
    }

解释：

主要是你需要将高度设置为 100%，只是为了让舒尔填满整个包裹。正如我所说的将位置设置为absolute，必须这样做只是为了确保一切都保持在原位。

同样重要的是底部现在是 15px，它指的是页脚的高度。我你想要一个更大的页脚编辑这个值，否则你会搞砸的。

在页脚绝对位置相同。这一次你必须将底部设置为 0px，以确保它位于环绕的末尾。

所以我希望你能理解。这对我来说很好，并且完全符合您的要求。