7

div をコンテナーの高さまで完全に拡張するのに苦労しています。

マークアップ:

<div class="container">
  <div class="innerOne inner"></div>
  <div class="innerTwo inner"></div>
</div>

異なるビューポート.innerTwoでは、 のコンテンツは のコンテンツよりも高くなっていますが、背景をのコンテンツ.innerOneと同じサイズにしたいと考えています.innerTwo

スタイル:

.container {
   width: 100%;
   height: auto;
   background-color: yellow;   

   /* clearfix */
   *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
     line-height: 0;
   }
   &:after {
    clear: both;
   }
}

.inner {
   float: left;
   width: 50%;
   height: 100%;
   background-color: red;
}

でも高さが合わない。コンテナーに高さを設定することでできることはわかっていますが、レスポンシブ サイトであるため、そうしたくありません。これは可能ですか？私はむしろJSを使用したくありません。

4

3 に答える 3

15

これにはdisplay:table-cellプロパティを使用できます。次のように書きます。

.container{
    width:100%;
    border:1px solid red;
    display:table;
}
.inner{
    display:table-cell;
    background:green;
    width:50%;
}
.innerTwo{
    background:blue
}

これをチェックしてくださいhttp://jsfiddle.net/XXHTC/

于 2013-01-27T14:40:21.760 に答える
1

ここで目的のソリューションを見つけることができます: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

幸運を ：）

于 2013-01-27T14:39:54.183 に答える
0

この記事では、レスポンシブ メディアのアスペクト比とサイズに関する問題について説明します。それはあなたの特定の問題に対する答えではないかもしれませんが、パーセンテージパディングの使用について議論しているセクションは時々私を助けてくれました. http://css-tricks.com/rundown-of-handling-flexible-media/

于 2013-01-27T14:37:42.477 に答える