2

私は次のcsshttp ://jsbin.com/azivip/75/editを持っています。青と緑のdivの間のスペースを埋めるために、黄色のdivの高さを設定したいと思います。高さ継承を使用すると、divが緑のdivを超えるようになります。

何かアイデアをお願いしますか？

ありがとう

4

2 に答える 2

5

css3 を使用できますcalc()：

#testsContainer { 
   height: calc(100% - 140px);
}

どこ140px = 100px of resultsContainer + 40px of buttonsContainer

フィドル

編集

古いバージョンの Firefox では-moz-calc()プレフィックスを使用し、古いバージョンの Chrome/Safari では-webkit-calc()プレフィックスを使用します。

于 2013-03-08T09:56:17.253 に答える
4

働くフィドル

コード内の次の css を変更するだけです。

 #testsContainer {
     position:absolute; /* replace with position: relative */
     top:100px;  /* height of the above container */
     bottom:40px; /* height of the below container */
     left:0px;
     right:0px;
     margin-top:0px;
     margin-bottom:0px;
     background-color:yellow; 
 }

  • topの高さに等しい値と の高さに等しいdiv#resultsContainer値bottomを指定しdiv#buttonsContainerます。

  • left: 0とを与えright:0ます。javascriptまたはcalc() cssプロパティのサポートを使用せずにコンテナがスペースを占有できるようにします。

  • 削除するheight:inherit

  • position: relativeと置き換えますposition: absolute

于 2013-03-08T11:18:32.113 に答える