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ファイルの場合：

bodyとhtmlタグを追加する bij を開始します。

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

bodyとhtmlタグにはこれらの項目を含める必要があります。そうしないとうまくいきません！

次に、(CSS で)ラップを追加し、次のコードが含まれていることを確認します。パディング、マージン、幅をいじって見栄えを良くすることができますが、今のところこれだけです:

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

説明:

min-heightは、テキストがあまりない場合でも、高さが常に 100% になるようにするためのものです。

位置は相対的でなければなりません! ラップ内の残りのすべてのタグ/クラスでは、位置は絶対でなければなりません! しかし、それについては後で説明します。

Height: autoについては、別の説明が必要です。IE は常にheight: 100%を認識するとは限らないため、 autoを使用する必要があります。

最後になりましたが、CSS ファイルにメインとフッターを追加する必要があります。

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

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

説明:

主に、高さを 100%に設定する必要があります。これは、ラップ全体を確実に満たすようにするためです。そして、私が言ったように、位置を絶対に設定します。これは、すべてがその場所に留まることを確認するためだけに行う必要があります。

また、下部が 15px になったことも重要です。これは、フッターの高さを指します。より大きなフッターでこの値も編集する必要があります。そうしないと、物事が台無しになります。

フッターで同じ位置に絶対。今回は、下部を 0px に設定して、ラップの最後に配置するようにします。

ですから、ご理解いただければ幸いです。これは私にとってはうまく機能し、あなたが求めたことを正確に実行します。