-1

div の位置と寸法についての質問が多く寄せられていることに気付きました。

  1. サイド バイ サイド div
  2. コンテナ内に div を並べて配置する
  3. 2 つの div を並べて表示

しかし、すべてではありませんが、多くの場合、div のサイズをハードコーディングしています。div を相対的な位置に置くことを好むので、私は主にパーセンテージで作業します。cssファイルで幅/高さのパーセンテージを次のように指定することから始めます

div #menu {
   width: 75%;
   min-width: 75%;
}

しかし、後でjQueryで最小幅を強制する必要があります:

function onload ()
{
   $( "#menu" ).css( "min-width", 0.75 * window.width() ) );
}

CSSコードを至る所で宣言するのは少しばかげている気がするので、私の質問は次のとおりです.cssスタイルシートでwidth/min-widthプロパティを指定する必要さえあるのでしょうか、それともこれらの状況を処理するためのより良い方法はありますか.

これは、私が遭遇している問題を示すjsfiddle の例です。

4

2 に答える 2

1

いくつかの問題：

  1. <body>あなたの CSS は、ウィンドウのサイズに合わせて拡大するために暗黙的に依存していました。それは物事の仕組みではありません。明示的なルールが必要です:

    body, html { width: 100%; height: 100%; padding: 0; }
  2. あなたのセレクターは間違っています。「div #A」のスペースは削除する必要があります。実際、「div」もそうすべきです。「id」で選択する場合、動的ウィジェットに対して何らかの修飾を行う場合を除き、必要なのは「id」だけです (タッチ スクリーン デバイスにのみスタイルを適用するための「body.touch #foo」など)。
  3. jsfiddle では、HTML マークアップ全体を提供するわけではありません。ツールがそれを行います。HTML パネルに入れるのは<body>コンテンツだけです。

これがコードの修正バージョンです。

于 2012-10-22T18:13:59.790 に答える
0

Pointyのアドバイスのおかげで、私は問題を理解しました。div #A {...}使用すべきだったときに使用してい#A {...}ました。その後、私はこの線で体を100％まで伸ばしました：

body {
   margin: 0px;
   height: 100%;
   min-height: 100%;
   min-width: 100%;
}

そして、それは期待通りに機能しました。ここを参照してくださいjsfiddle

于 2012-10-22T18:15:58.027 に答える