web-dev-qa-db-ja.com

CSS：高さ-divの残りを埋めますか？

シンプルなCSSでこれが可能かどうか、またはこれにjavascriptを使用する必要があるのだろうか？

ウェブサイトにサイドバーがあります。単純なdiv＃sidbarは、通常約1024pxの高さですが、コンテンツによって高さが動的に変化します。

次のケースをイメージングしましょう：

<div id="sidebar">
   <div class="widget"></div> //has a height of 100px
   <div class="widget"></div> //has a height of 100px
   <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>

div＃restがサイドバーの残りの部分をdiv＃sidebarの下部に達するまで埋めてほしい。

これは純粋なCSSで可能ですか？

cssheight
34
matt

あなたが望むのは100% - 200pxしかし、CSSはこれらのような表現をサポートしていません。 IEには非標準の「式」機能がありますが、ページをすべてのブラウザーで動作させたい場合、JavaScriptなしでこれを行う方法はわかりません。すべてのdivsはパーセンテージの高さを使用するため、10％-10％-80％のようになります。

更新： JavaScriptを使用した簡単なソリューションです。サイドバーのコンテンツが変更されるたびに、次の関数を呼び出してください：

function resize() {
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
};
7
casablanca

#widget（あなたの場合は100px）の正確な高さがわかっている場合は、絶対配置を使用してJavaScriptの使用を避けることができます。

#sidebar
{
height: 100%;
width: ...;
position: relative;
}

.widget
{
height: 100px;
}

#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}
35
Jirka

代わりにtable-elementを提案します：

  • +：クリーンなCSS
  • +：JavaScriptの回避
  • -：意味的に誤用されたテーブル
  • -：要求されたdiv要素ではない
6
table

同様の質問への答えを探しているときにこの質問に出くわし、calcを説明したいと思いました。この投稿の時点で、calcはクロスブラウザにまだ対応していません。ただし、 こちらのリンク をチェックして、ターゲットブラウザがサポートされているかどうかを確認できます。 jsFiddleの例 でcalcを使用するようにmattの仮想ケースを変更しました。基本的に、それはcasablancaが彼の答えで提案することを行う純粋なCSSソリューションです。たとえば、ブラウザがcalcをサポートしている場合、height: calc(100% - 200px);も同様のプロパティに対して有効です。

4
ricksmt