Cách CSS để điều chỉnh chiều cao của div dựa trên một div khác

Tôi có một div chứa vùng linh hoạt, vùng bật lên và chân trang.Cách CSS để điều chỉnh chiều cao của div dựa trên một div khác

Khu vực linh hoạt và chân trang luôn có mặt.
Diện tích bật lên là 0, 40px hoặc 60px, vì nội dung của nó là được thay đổi động với js.
Khu vực linh hoạt phải lấp đầy tất cả không gian phía trên chân trang.

Có phương pháp chỉ css để cho phép khu vực linh hoạt tăng/giảm chiều cao dựa trên kích thước của cửa sổ bật lên không?

Với css hiện tại tôi có, khi tôi xóa cửa sổ bật lên trong jsfiddle, linh hoạt không mở rộng để lấp đầy khu vực.

Tôi đang cố gắng xem liệu tôi có thể thực hiện điều này mà không cần jquery hoặc flexbox để có khả năng tương thích tối đa hay không.

Cảm ơn các đề xuất/nhận xét của bạn!

https://jsfiddle.net/L8me7fLk/

div { 
 
    color: #ffffff; 
 
} 
 
#container { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
#flexible { 
 
    background-color: red; 
 
    width: 100vw; 
 
    min-height: 68vh; 
 
    max-height: 80vh; 
 
} 
 
#popup { 
 
    width: 90%; 
 
    max-height: 60px; 
 
    min-height: 40px; 
 
    line-height: 20px; 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-bottom: 50px; 
 
    background-color: #cccccc; 
 
} 
 
#footer { 
 
    width: 90%; 
 
    height: 50px; 
 
    background-color: #666666; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="container"> 
 
    <div id="flexible"> 
 
    1content 
 
    <br/>2content 
 
    <br/>3content 
 
    <br/> 
 
    </div> 
 
    <div id="popup"> 
 
    1popup 
 
    <br/>2popup 
 
    <br/>3popup 
 
    <br/>4popup 
 
    <br/>5popup 
 
    <br/> 
 
    </div> 
 
    <div id="footer"> 
 
    footer 
 
    </div> 
 
</div>

Nguồn

2016-08-28 Tien Yuan

Với popup là tuyệt đối bạn không có bất cứ cách nào có thể làm được điều này chỉ với CSS. Giải pháp duy nhất là JavaScript. Flexbox cũng sẽ chỉ hoạt động khi bạn không sử dụng định vị tuyệt đối. Vấn đề khi sử dụng JS cho vấn đề này là gì? Bạn thậm chí không cần phải sử dụng jQuery, chỉ cần đồng bằng vanilla JS. –

Bộ chọn liền kề và tiếp theo?jQuery là khả năng tương thích tối đa;) –

Vâng tôi có thể sử dụng flexbox hoặc js nếu cần thiết. Chỉ cần tự hỏi nếu có một số thông minh tôi có thể thử. Cảm ơn các ý kiến. –

Các kết quả mong muốn có thể đạt được với flexbox.

Thứ nhất, bạn nên xóa <br/> giây khỏi mã. Thay vào đó, bạn có thể đặt các mục này trong <div> s.

... 
<div>1content</div> 
<div>2content</div> 
<div>3content</div> 
...

Trên container, bạn có thể sử dụng flexbox nói với nó để hành xử như một cột:

#container { 
    display: flex; 
    flex-flow: column wrap; 
}

này tương tự sẽ được yêu cầu cho các em, bởi vì cách bố trí của nội dung của flexible, popup, và footer là các cột.

Bây giờ là phần quan trọng nhất. Các flexbile div nên chiếm không gian có sẵn, trong khi div bên dưới nó không nên. Do đó, chúng ta có thể áp dụng như sau:

#flexible { 
    display: flex; 
    flex: 1 0 auto; 
} 

#popup { 
    display: flex; 
    flex: 0 1 auto; 
}

này cho flexible sử dụng không gian có sẵn, và popup không. Để biết thêm thông tin về cách chọn flex làm việc, xem https://developer.mozilla.org/en/docs/Web/CSS/flex

JS Fiddle example

Nguồn

2016-08-28 19:55:22 alanbuchanan

Cảm ơn ví dụ. Có, tôi sẽ chuyển đổi này sang hộp flex như bạn đề nghị. –

<html> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.5; user-scalable=YES" /> 
     <meta http-equiv="Content-Type" content="text/html; accept-charset=UTF-8"> 
    <style> 
    .EqHeightDiv{ 
     float:left; 
border:solid 1px #ccc; 
background:#0CF; 
margin:10px; 
max-width:300px; 
padding:10px; 
} 
    </style> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    function equalHeight(group) { 
     tallest = 0; 
     group.each(function() { 
      thisHeight = $(this).height(); 
      if(thisHeight > tallest) { 
       tallest = thisHeight; 
      } 
     }); 
     group.height(tallest); 
    } 

    $(document).ready(function(){ 
     equalHeight($(".EqHeightDiv")); 
    }); 
    </script> 
    </head> 

    <body> 
    <div class="EqHeightDiv">Here is some stuff</div> 
    <div class="EqHeightDiv">Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some stuff Here is some </div> 
    <div class="EqHeightDiv">Here is some stuff</div> 
    </body> 

    </html>

Nguồn

2016-08-29 13:16:57

Cách CSS để điều chỉnh chiều cao của div dựa trên một div khác

Trả lời

Các vấn đề liên quan