Zurb Foundation 4 - Cách tạo cột có chiều cao đầy đủ

Question

Tôi đang cố gắng tạo bảng nổi. Nó cần được tách ra từ lưới và lấp đầy toàn bộ chiều cao của tài liệu, ở phía bên trái như SO:

---

thí nghiệm của tôi cho đến nay:

<div class="row left"> 
    <div class="small-3"> 
     <div class="panel"> 
      Panel HTML 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="small-6 columns"><div class="panel">Main - Content</div></div> 
    <div class="small-6 columns"><div class="panel">Main - Content</div></div> 
</div> 

Sản xuất như sau :

I ' m không chắc thực hành tốt nhất khi sử dụng Foundation là gì và không thể tìm thấy tài liệu tham khảo trong tài liệu của họ. Đánh giá cao sự giúp đỡ :)

Answer 1

đây nếu phát hiện lỗi https://github.com/zurb/foundation/issues/226

thử plugin jquery này để đồng bộ hóa chiều cao https://github.com/ginader/syncHeight (i didnt thử nó chưa)

Answer 2

anh chàng này tìm thấy một cái gì đó của một giải pháp cho vấn đề chiều cao đầy đủ :

https://gist.github.com/joanhard/6375966

nó cũng là javascript dựa, nhưng nó chỉ là một dòng javascript so sánh với việc sử dụng một plugin thêm ...

Answer 3

Nếu bạn đang sử dụng jQuery trong dự án của bạn, tôi đã viết một wrapper nhanh chóng cho jQuery.syncHeight, mà làm cho nó dễ dàng hơn để sử dụng, với nhiều instantiation:

https://gist.github.com/replete/5728123

Answer 4

Bạn có thể đặt position: fixed; trên div bạn muốn có chiều cao tối đa, sau đó đặt chiều cao của nó thành 100%. Tôi đã tạo nhanh fiddle nơi bạn có thể thấy nó hoạt động.

HTML:

<div class="row"> 
    <div class="small-4 columns" id="sidebar"> 
     Fixed full height 
    </div> 
    <div class="small-8 columns"> 
     Other Content 
    </div> 
</div> 

CSS:

#sidebar{ 
    position: fixed; 
    height: 100%; 
    background: #222; 
    color: #FFF; 
    padding: 5px; 
}