Đặt chiều cao của phần tử trong bố cục đáp ứng?

Question

Nói chung, những gì đánh dấu và CSS sẽ tạo ra một yếu tố với chiều cao dựa trên phần trăm trong một thiết kế đáp ứng? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? cho biết cách tạo hai cột có độ cao 100%, nhưng giá trị này bị phá vỡ theo chiều cao < 100%.

Cụ thể, tôi có div bên với danh sách các mục, có thể ngắn (trống) hoặc dài (overflow: auto). Nhưng vì không có phần tử gốc nào có chiều cao cố định, height: 20%; không hoạt động. Làm thế nào tôi có thể cung cấp cho thanh bên một chiều cao chất lỏng trong khi duy trì một thiết kế đáp ứng?

Answer 1

Bạn đã thử thuộc tính chặn nội dòng có căn chỉnh theo chiều dọc: trên cùng chưa? Gần đây tôi đã thấy bài viết này có thể giúp bạn giải quyết vấn đề của mình. Thông thường chiều cao chỉ thay đổi kích thước để phù hợp với nội dung vì vậy tôi không chắc chắn chính xác những gì bạn đang cố gắng để thực hiện. Kiểm tra bài viết này ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

Thường có đáy đệm chất lỏng trên thùng chứa gốc giải quyết được sự cố này.

Thông tin thêm có thể được tìm thấy ở đây: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

cập nhật: trên js bin http://jsbin.com/obesuk/1/

đánh dấu:

<div class="obj-wrapper"> 
<div class="content">content</div> 
</div> 

css:

.obj-wrapper { 
    position:relative; 
    width:50%; 
    padding-bottom:40%; 
    height:0; 
    overflow:hidden; 
    } 
    .content { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:red; 
    }