Twitter Bootstrap - 100% Chiều cao

Question

Tôi đang cố gắng thiết kế Bảng điều khiển dành cho ứng dụng của mình bằng cách sử dụng khung công tác twitter-bootstrap nhưng tôi không thể làm bố cục của mình hoạt động.

Tôi lấy cảm hứng từ thiết kế này:
Nó sẽ là bố cục hai cột "Thanh bên" và "Nội dung chính" nhưng tôi không thể đạt được chiều cao 100% để hoạt động. Tôi quản lý để có được bố trí 2 cột với 100% chiều rộng sử dụng mã này:

HTML

<div class="container-fluid"> 
<div class="row-fluid"> 


    <div class="span2 colorize-white"> 
    <!--Sidebar content-->Sidebar 
    </div> 


    <div class="span10 colorize-white"> 
    <!--Body content-->Main 
    </div> 


</div> 
</div> 

CSS

/* Global */ 
html, body { 
    color: #6B787F; 
    padding: 0; 
    height: 100%; 
    background: #11161a; 
    font-family: 'PT Sans' !important; 
} 

.colorize-white { 
    background: #FFFFFF; 
} 

.no-margin { 
    margin: 0; 
} 

Tôi có một nửa nhưng có hai điều tôi không thể giải quyết.
1) 100% Chiều cao
2) Bắt thoát khỏi lề bên ngoài trên hình ảnh thứ hai

Bạn có thể thấy rằng tôi có chênh lệch giữa biên giới trình duyệt và Sidebar/yếu tố chính và sau đó biên độ giữa hai người. Tôi cần phải loại bỏ điều này nếu tôi thêm không có lề cho tất cả các phần tử của tôi trong HTML tôi dán bao gồm thẻ body tôi vẫn không nhận được 100% chiều cao và tôi vẫn không thể thoát khỏi lề giữa trình duyệt biên giới và thanh bên và nội dung chính trong khi không gian lề giữa Thanh bên và Nội dung chính biến mất.

Answer 1

Tôi không chắc chắn mô hình lưới của Bootstrap là những gì bạn đang tìm kiếm ở đây. Thay vào đó, bạn có thể tìm kiếm vị trí tuyệt đối. Ví dụ:

#sidebar, #content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 
#sidebar { left: 0; width: 10em; } 
#content { left: 10em; right: 0; } 

Try it out.

Answer 2

Tôi không chắc chắn nếu điều này là những gì bạn đang tìm kiếm, but here it goes.

chỉ sửa đổi CSS hơi. margin:0; đến html, body thẻ.

Answer 3

Dưới đây là một ví dụ mà làm việc cho Bootstrap 3 ..

Hãy chắc chắn rằng HTML và cơ thể đều chiều cao 100%. Quấn thanh bên và nội dung rồi sử dụng position:absolute trên thanh bên.

http://www.bootstrapzero.com/bootstrap-template/basis

Code: http://bootply.com/86704