3

問題: 私のクライアントは、ブラウザーやウィンドウのサイズに関係なく、ページにスクロールがないように、彼の製品の起動 Web ページを作成するように求めています。

疑問:これは CSS と Javascript を使用して可能ですか?

早期診断:これはこれまたはこれと少し似ているかもしれませんが、違いは、親 DIV の高さを調整するだけでなく、すべての要素のサイズを特定の比率でサイズ変更したいことです。

したがって、ステートメント: (現在のウィンドウ サイズと参照ウィンドウ サイズ)の比率に基づいて、すべての要素 (画像、div、テキスト ... すべて) のサイズを変更する必要があります。おそらくJavascriptはこれを解決できるでしょうか？

質問:これを行う方法?

4

1 に答える 1

3

heightととwidthを、に設定し、、、およびの要素のパーセンテージを使用するだけです。<html><body>100%overflowhiddenlefttopwidthheight

<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <title>Proportional resizing</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

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

    div {
      position: absolute;
      left: 30%;
      top: 20%;
      width: 40%;
      height: 30%;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div>divthing</div>
</body>
</html>

これらのパーセンテージは、含まれているブロック(この場合は )に対する相対値<body>です。

更新:別の質問に答えるために: 背景画像のスケーリングはまだほとんどサポートされていません。CSS 3background-sizeプロパティが定着すると (この表を参照)、物事はより簡単になります。とりあえず、この回答を見てください(はい、つまり、より多くのマークアップを意味します)。

于 2010-06-22T22:13:17.907 に答える