三列平等高度和页脚总是底部

Question

我需要3列平坦高度的栏目和页脚总是在底部。 这些侧边栏的宽度是固定的。如果屏幕小于“最大宽度”（响应），内容区域可以是不同的宽度？任何想法与IE一起工作也是如此。因此，flexbox无法使用。我可以使它与Bootstrap一起工作吗？

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/