Các tab giao diện người dùng Jquery có cùng chiều cao

Question

Tôi muốn sử dụng các tab giao diện người dùng Jquery để tạo ba tab có chứa cùng một vùng nội dung có kích thước. Kích thước của khu vực nội dung có vẻ phụ thuộc vào nội dung. Làm thế nào để ép buộc nó để tất cả ba tab có cùng một vùng nội dung có kích thước để tôi có thể sử dụng chiều cao 100% cho nội dung và chúng sẽ chỉ lấp đầy tất cả không gian có sẵn?

Cảm ơn!

Answer 1

Nếu bạn có chiều cao cụ thể trong đầu thì bạn chỉ có thể chỉ định chiều cao đó trên .ui-tabs-panel s thích hợp. HTML cho như thế này:

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">One</a></li> 
     <li><a href="#tabs-2">Two</a></li> 
     <li><a href="#tabs-3">Three</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <!-- ... --> 
    </div> 
    <div id="tabs-2"> 
     <!-- ... --> 
    </div> 
    <div id="tabs-3"> 
     <!-- ... --> 
    </div> 
</div> 

Sau đó, bạn có thể làm cho tất cả các tấm 200px cao với:

#tabs .ui-tabs-panel { 
    height: 200px; 
    overflow: auto; 
} 

Demo: http://jsfiddle.net/ambiguous/SQu6K/