CSS: Làm cho một chiều cao của div trung tâm mở rộng để lấp đầy những gì còn lại trong một hộp FIXED-HEIGHT

Question

Xin lỗi các bạn, đó là một chiều cao CSS khác "100%" (sắp xếp) câu hỏi ...

Tôi có bố cục như sau:

---------------. 
|Containing div | Containing div's height is FIXED 
| .-----------. |  (say 400px for simplicity) 
| |Inner div1 | | Inner div1 has height fixed (say 50px) 
| '-----------' | Inner div3 has static-but-unknown content, 
| .-----------. |  height not known at render time 
| |Inner  | | Inner Variable Div should expand to the rest 
| |Variable | |  of the space - i.e. I want to eliminate 
| |Div  | |  the "blank space" 
| '-----------' | 
| .-----------. | 
| |Inner div3 | | 
| |with fixed | | 
| |usercontent| | 
| '-----------' | 
| blank space | 
'---------------' 

Đó là: một Ngăn chứa Div có chiều cao cố định (nói 400px). Một số div bên trong nó, theo chiều dọc xếp chồng lên nhau: div1, Biến Div, div3. Ít nhất một trong số họ (div3) có nội dung tĩnh nhưng không biết, vì vậy tôi không thể chỉ tát pixel chiều cao tính toán trên tất cả mọi thứ. Giả sử vì lợi ích của đối số div1 + div3 S fit phù hợp trong vùng chứa Div.

Tôi muốn biến Div mở rộng để lấp đầy phần còn lại của chiều cao trong phạm vi 400px của Container Div. Nhưng tôi không thể xác định chiều cao của nó là 100% bởi vì nó bỏ qua slice mà các div bên trong khác cần, và làm tràn Div Container.

Điều này khác với hầu hết các câu hỏi được gắn thẻ chiều cao CSS tại đây, nhưng CSS div height won't expand và Fixed parent container height, child to expand/be-limited-to parent container có thể có liên quan.

Tôi là một giải pháp CSS thuần túy nếu có thể. Tôi không sao với nó chỉ hoạt động trong FF/Webkit/IE gần đây.

Answer 1

Có không dường như là một cách để làm điều đó trong CSS tinh khiết và vẫn có nền tảng khác nhau trên tất cả các yếu tố. Vì vậy, tôi sử dụng một chút javascript.

Những người tò mò về ứng dụng: Tôi đang sử dụng CSS để tạo mockups của Magic: thẻ Gathering. Trong trường hợp này, tôi đang tạo mã thông báo: so sánh http://www.magicmultiverse.net/cards/52371 và http://www.magicmultiverse.net/cards/44771 với the officialequivalents. Tôi muốn có hộp văn bản có kích thước chỉ lớn như nó cần thiết.Và tôi sẽ cho phép nghệ thuật đằng sau trong hộp cong lớn. Vì vậy, Javascript nó được.

Answer 2

Câu trả lời này sẽ chỉ làm việc nếu bạn không cần phải đặt một background trên "Inner Biến Div":

Live Demo

CSS:

#container { 
    background: #ccc; 
    height: 400px; 
    width: 300px; 

    position: relative 
} 
#div1 { 
    background: #999; 
    height: 50px 
} 

#content { 
    background: #ddd; 
    overflow: hidden 
} 
#div3 { 
    background: #999; 
    position: absolute; 
    bottom: 0; 
    width: 100% 
} 

HTML:

<div id="container"> 
    <div id="div1">I'm 50px.</div> 

    <div id="content">I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br /></div> 

    <div id="div3">I'm unknown.<br />A<br />B<br />C</div> 
</div> 

Answer 3

Điều này được thực hiện phức tạp ít nhất trong tâm trí của tôi bởi div3 có chiều cao thay đổi.

Giải pháp tương tự tôi đã sử dụng thường có div cuối cùng là chiều cao tĩnh và sau đó sử dụng kết hợp chiều cao 100% và đệm dưới bằng chiều cao của div cuối cùng để cho phép nội dung trung tâm mở rộng khi thích hợp .

Bạn có thể sử dụng kỹ thuật này trên div bao bọc div biến bên trong và div3 bên trong và sau đó đặt div3 dưới cùng tuyệt đối vào div đó (với div gói là positon tương đối) - nhưng sau đó tôi tin rằng thay đổi kích thước trình duyệt/độ phân giải nhỏ hoặc combo nội dung có thể khiến div3 chồng lên nhau biến div bên trong hoặc ngược lại; Tôi nghĩ rằng nó ít nhất sẽ giúp bạn gần gũi hơn với câu trả lời.

---

Đây là giải pháp tốt nhất mà tôi có thể nghĩ ra, thật không may khi sử dụng dấu gạch ngang jQuery.

http://jsfiddle.net/G7fys/1/