divを残りのスペースより多く取る

Question

私はウェブページを作っています.2つの固定divがヘッダ用で、1つはコントロールバー用です。ヘッダーdivの高さは50px、幅は100％、サイドコントロールバーの高さは100％、高さは50pxです。それにはtop:50px;が設定されており、bottom 0px;に設定されているのはページ外に出てこないほどうまくいくようですが、まだわかりませんが、実際の問題は残りの画面スペースを占めるdivを置くときです画面のスペースよりも...それは画面または固定divの後ろに行くことはできませんが、それは下部の画面から消えますどのように私はこれが可能かどうかは、hereこれまでのページです

Answer 1

私はposition:fixedを使用しないことをお勧めします。モバイルデバイスがディスプレイを正しく遵守していないことが判明しています（詳しくはlinkをご覧ください）。その代わり、私は、フルサイズの容器にposition:absolute;を使用することをお勧めして、あなたの "コンテンツ" overflow:auto;

HTML

<div id="content"> 
    <div id="top-bar"> 

    </div> 
    <div id="control-bar"> 

    </div> 
    <div id="main-content"> 

    </div> 
</div> 

CSS

#content{ 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
} 
#top-bar{ 
    position:absolute; 
    left:0; 
    top:0; 
    height:50px; 
    right:0; 
    background-color:blue; 
} 
#control-bar{ 
    position:absolute; 
    top:50px; 
    bottom:0; 
    left:0; 
    width:50px; 
    background-color:red; 
} 
#main-content{ 
    position:absolute; 
    top:50px; 
    left:50px; 
    right:0; 
    bottom:0; 
    overflow:auto; 
    background-color:yellow; 
} 

JSFIDDLE

を使用しています

Answer 2

これをフレックスボックスに置き、flex-growを使用すると、要素が重複することなく、または何も実行されずに空き領域を占めるようになります。

* {margin:0;padding:0;box-sizing:border-box;} 
 
body,html { 
 
    min-height: 100vh; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    background: #333; 
 
    min-height: 50px; 
 
    border-bottom: 1px solid black; 
 
} 
 
div { 
 
    display: flex; 
 
} 
 
aside { 
 
    width: 50px; 
 
    background: #222; 
 
} 
 
.grow { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    background: #555; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header> 
 
<div class="grow"> 
 
    <aside></aside> 
 
    <main class="grow"></main> 
 
</div>