1

ビューポートに応じて幅と高さが比例して縮小または拡大するdivを作成しようとしています。上記の例でわかるように、このメソッドはdivを水平方向にのみ拡張し、垂直方向には拡張しません（固定の高さ）。ラッパーまたはmain_contentの高さの値にパーセンテージを指定しようとすると、ピクセルまたはemで指定されていない限り、ブラウザーは高さの値を単に無視します。どうすればこれを機能させることができますか？私の頭の中で、divの高さにパーセンテージ値を与えることができれば、これで問題は解決しますか？

<div class=".wrapper">
  <div id="main_content"></div>
<div>

.wrapper{
   width: 80%;
   margin : 0 auto;
}

#main_content{
  width : 100%;
  height : 500px;
}
4

1 に答える 1

0

短い答え：

html, body {
    height: 100%;
}

長い答え：

あなたhtmlとbodyはコンテナでもあり、コンテンツに合わせて自動的にスケーリングされる高さを持っています。残念ながら、height: 100%ラッパーを設定すると、高さはコンテナーの100％に設定されます。これは、パディングとマージンを除いたラッパーの高さです。解決策は、の高さをhtml実際の親の100％にdocument設定してから、ボディの高さを親の100％に設定することhtmlです。次に、ラッパーをドキュメントの高さのパーセンテージに設定できるようになります。

于 2012-09-15T03:56:10.220 に答える