情况：

Question

我想在缩放时尝试使html页面适合我的屏幕。我不能更多地指定这个或者我不知道如何解释：打开此网站http://www.airsoftgent.be/并尝试缩小，然后您就会看到我的意思。

请帮帮我!!

谢谢

Answer 1

我明白你想做什么。几个月前，我试图通过成功做出同样的事情。

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

解决方案：

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

首先，我有一个普通的HTML页面，包含页眉，主页和页脚。标题目前并不重要。

让我们首先添加换行，将其放在主和页脚周围。 喜欢这样：

    <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中），使shure包含以下代码，你可以搞乱填充，边距和宽度使它看起来更好但是仅仅是为了现在：

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

<强> Explenation：

min-height 是使shure的高度始终为100％，即使文本也不多。

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

对于高度：自动，我们需要另一个explenation：因为IE并不总是识别 height：100％，所以你必须使用 auto

现在最后但并非最不重要：我们必须在CSS文件中添加 main 和页脚：

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

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

<强> Explenation：

在主中，您需要将高度设置为100％，只是为了使shure填充整个包装。正如我所说的那样将位置设置为绝对，这必须做的只是为了让一切都停留在它的位置。

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

在页脚中，相同位置绝对。而这次你必须将 bottom 设置为0px，以使shure位于包装结束处。

所以我希望你明白。这对我来说很好，并且完全符合你的要求。