Üç sütun eşit yükseklik ve altbilgi her zaman alt

Question

Her zaman eşit yükseklikte sütunlara ve altbilgiye sahip 3 sütun düzenine ihtiyacım var. Bu kenar çubukları sabit genişliktedir. Ekran "max-width" (responsive) 'den küçükse, içerik alanı farklı genişlikli olabilir mi? Bunu da IE ile çalışmak için herhangi bir fikir .. Bu yüzden flexbox seçeneği dışında. Bootstrap ile çalışabilir miyim? Bu gibi içerik genişliğini ayarlayarak

template draft here

Answer 1

deneyin:

içerik {

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/