Chân trang và nội dung được chú thích với chiều cao 100%

Question

Tôi muốn một trang có chân trang dính mà thanh cuộn không chồng lên tiêu đề, chỉ nội dung. Giống như tôi làm trong this fiddle. Nhưng bây giờ tôi muốn nội dung đó (hộp chấm) có chiều cao 100% của cơ thể.

html

<div class="navbar navbar-inverse navbar-fixed-top"></div> 
<div class="container"> 
    <div class="content-container"> 
     <div class="my_content">Full height ??</div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</div> 

css

html, 
    body { 
     height: 100%; 
     overflow: hidden; 
    } 

    body { 
     padding-top: 50px; 
    } 

    .container { 
     overflow-y: auto; 
     overflow-x: hidden; 
     height: 100%; 
    } 

    .content-container { 
     padding-right: 15px; 
     padding-left: 15px; 
     margin-right: auto; 
     margin-left: auto; 
     position: relative; 
     padding-top: 15px; 
     padding-bottom: 15px; 
     min-height: 100%; 
     margin-bottom: -60px; 
    } 

    .footer { 
     position: relative; 
     width: 100%; 
     background-color: red; 
    } 

    .footer, 
    .push { 
     height: 60px; 
    } 

    .my_content { 
     border: 1px dotted; 
     width: 100%; 
     height: 100%; 
     min-height: 200px; 
     min-width: 300px; 
    } 

Bạn có thể đề nghị bất kỳ mẫu nào khác cho việc sử dụng chân dính.

Answer 1

Bạn có thể đặt .my_content-100% của khung nhìn chiều cao trừ đi chiều cao và (dọc) đệm của các yếu tố khác (ví dụ: chiều cao tiêu đề, chiều cao chân trang, đệm trên cùng và dưới cùng trên .content-container) trên trang của bạn như sau:

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

DEMO

Nếu header và footer của bạn có chiều cao biến, điều này sẽ không hoạt động mặc dù.

Answer 2

sử dụng ví dụ này cho chân dính nó không chồng chéo lên nhau tiêu đề

http://jsfiddle.net/0dbg9ko2/12/

.footer { 
position: fixed; 
bottom:0; 
left:0; 
background-color: red; 
} 

và tôi có thể một số thay đổi trong html