divでCSSを使って高さを調整しますが、ブラウザのブートストラップはサイズ変更されません

Question

異なるコンテンツを持つ6つのdiv要素があるとしましょう。

3のdiv要素は、本体容器（スクロール）

最後の2つのdiv要素が

フッターあるさ

1 divの方法だけで、純粋なCSSでこのscallableのすべてを作るために、ヘッダーですか？今は私のブラウザのサイズを変更するときに私のフッタのdivは消えていると私はそれらに到達することはできませんし、私は私のメインコンテナのdivは半分（下の部分が消える）とヘッダーのdivsの高さが小さくなる

最高のシナリオは、ヘッダーとフッターのdivを何とか固定高さにすることです（方法はわかりません）、broswerのサイズを変更するメインコンテナのサイズが変更されます。

HTML

<div ng-controller="ListController"> 
    <div class="header"> 

    </div> 
    <div class="price_found"> 

    </div> 
    <div class="settings"> 

    </div> 
    <div class="main_container antiscroll-wrap"> 
     <div class="container antiscroll-inner"> 

     </div> 
    </div> 
    <div class="total_select"> 

    </div> 
    <div class="menu_footer"> 

    </div> 
</div> 

SCSS

.cheap-watcher { //this is main container properties in which everything is injected 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    width: 360px; 
    height: 100%; 
    max-width: 360px; 
    max-height: 100%; 
    min-height: 100%; 
    background-color: #f1f3f4; 
    float: right; 

    .header { 
     height: 7.57%; 
     background-color: #00a8e8; 
    } 

    .price_found { 
     padding-top: 16px; 
     height: 10.169%; 
     background-color: #fff; 
     text-align: center; 
    } 

    .settings { 
     height: 4.971%; 
     width: 100%; 
     display: inline-block; 
    } 

    .main_container { 
     width: 360px; 
     background-color: #fff; 

     .container { 
      width: 360px; 
      height: 57.856%; 
     } 
    } 

    .total_select {   
     height: 7.57%; 
     width: 100%; 
     background-color: #fff; 
     text-align: center; 
     border-top: solid; 
     border-top-color: #e8e8e8; 
     border-top-width: 2px; 
    } 

    .menu_footer { 
     height: 11.864%; 
     width: 100%; 
    } 
} 

Answer 1

あなたのコンテナpxやvhで例えばmin-heightのすべてに割り当てることができます。 Min。高さはコンテナが常に最小の高さを持つことを意味しますが、コンテンツが増えるにつれて大きくなります。メインコンテナの場合は固定高さが必要なので、通常はheightを使用し、pxまたはvhとoverflowを使用します。高さが許せば、メインコンテナはスクロール可能になります。

が、これはあなたに少し助け作業Fiddle

希望を参照してください。