0

980px の最大幅を使用してレスポンシブ グリッドを構築して固定 PX 幅を % に変換していますが、PX に設定されている高さを % に更新するために何をしなければならないかわかりません。これを達成する方法について誰かアドバイスできますか？高さを に設定しようとしましmax-height:300px; height:100%たが、成功しませんでした。

JS フィドル http://jsfiddle.net/5jJQk/

CSS の例

#ctn{
  max-width: 980px; /* 960 */
  width:100%;
  margin: 0 auto;
  clear: left;
  background: #eee;
  padding: 10px;
}

.col{
  background: #b7b7b7;
  max-height: 300px;
  height: 100%;
  margin: 1.041666667%; /* 10/960 */
  float: left;
}

.four{
  width: 31.25%; /* 300/960 */
}

.eight{
  width: 64.583333333%; /* 620/960 */
}

.twelve{
  width: 97.916666667%; /* 940/960 */
  clear: left;
}
4

2 に答える 2

2

height親要素が高さを定義している場合、またはルート要素までずっとパーセンテージである場合にのみ、パーセンテージで機能します。

追加するとどうなるか見てみましょう

html, body, #ctn { height:100%; }

あなたのCSSに。

ただし、高さの定義は非常に特殊な場合にのみ必要です。通常、ブロックをコンテンツに合わせて配置する必要があります。

于 2013-01-13T20:15:39.197 に答える
0

メディアクエリを調べてみると、変換時に非常にうまく機能します。

http://mediaqueri.es/

http://css-tricks.com/css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/

これが役立つことを願っています。

于 2013-01-13T19:44:37.747 に答える