bootstrap：コンテンツdivを中央に伸ばしてください

Question

コンテンツのdivをヘッダーとフッターの中央のスペースに入力したいと思います。

ヘッダ：

<nav id="header" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    ... 
    </div> 
</nav> 

フッタ：

<nav id="footer" class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container-fluid"> 
    test footer 
    </div> 
</nav> 

コンテンツ：コンテンツの

<div id="content" class="panel panel-default"> 
    ... 
</div> 

CSSコード

現在 `ブートストラップを使用してスタイルされたヘッダとフッタdivヘッダ/フッタの高さを50pxに固定されている場合、それはうまく動作

.content{ 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    right: 0px; 
    bottom: 50px; 
    overflow-y: auto; 
} 

あります。ヘッダー/フッターの高さは、画面のサイズが異なるために変化しています。

Answer 1

あなたは、ヘッダー/フッターの中に異なる高さを持っているメディアクエリを使用して、すべての画面サイズのためのdivの高さを定義することができます。

https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

たぶん、あなたはあなたにjsfiddleを共有することができコード？

Answer 2

あなたのヘッダーとフッターは、あなたが以下のような何かを行うことができ、すべてのデバイスでは50px高さで残っている場合：

.content{ 
    width: 100%; 
    height: calc(100% - 100px); 
    position: absolute; 
    left: 0; 
    top: 50px; 
    overflow-y: auto; 
}