3列と同じ高さとフッターは常に下端

Question

同じ高さの列とフッターは常に下に3列のレイアウトが必要です。 これらのサイドバーは固定幅です。画面が「最大幅」（応答性）よりも小さい場合、コンテンツ領域は異なる幅にすることができますか？ IEでこの作業を行うためのアイデアも.. ..フレックスボックスはオプションではありません。私はそれをブートストラップで動作させることができますか？

template draft here

Answer 1

このようなあなたのコンテンツの幅を設定してみてください：

コンテンツ{

width:calc(100vw - /*width of left sidebar + width of right sidebar */); 
    height:calc(100vh - /*footers height*/); 
} 

Answer 2

body, html, .wrapper { 
 
      min-height: 100%; 
 
      height:100%; 
 
     } 
 

 
     .cf:before, 
 
     .cf:after { 
 
      content: " "; /* 1 */ 
 
      display: table; /* 2 */ 
 
     } 
 

 
     .cf:after { 
 
      clear: both; 
 
     } 
 

 

 
     .cf { 
 
      *zoom: 1; 
 
     } 
 

 
     .content { 
 
      min-height: calc(100vh - 100px); 
 
     } 
 

 
     .left, .right, .main-contetn { 
 
      background: #ccc; 
 
      min-height: calc(100vh - 100px); 
 
      float: left; 
 
     } 
 

 
     .left, .right { 
 
      width: 200px; 
 
     } 
 

 
     .main-contetn { 
 
      width: calc(100% - 400px); 
 
     } 
 

 
     .main-contetn { 
 
      background: #ddd; 
 
     } 
 

 
     .footer { 
 
      height: 100px; 
 
      background:#999; 
 
      color:#fff; 
 
     }

<div class="wrapper"> 
 
     <div class="content cf"> 
 
      <div class="left"> 
 
       Left 
 
      </div> 
 
      <div class="main-contetn">main Content</div> 
 
      <div class="right">right</div> 
 
     </div> 
 
     <div class="footer">footer</div> 
 
    </div>

https://jsfiddle.net/22xv020d/