Chiều cao phần trăm CSS khi cha mẹ có chiều cao tối thiểu/tối đa

Question

Tôi biết rằng khi bạn sử dụng chiều cao phần trăm trên một phần tử, phần trăm là phần trăm của phần tử gốc. Hãy nói rằng bạn muốn một đứa trẻ được 40% của cha mẹ của nó. Phụ huynh có chiều cao tối đa và tối thiểu được chỉ định nhưng không có chiều cao rõ ràng được chỉ định. Ví dụ:

<div id="container"> 
    <div id="one"> 
    <div id="two"></div> 
    </div> 
</div> 

css

#container{ 
    height: 500px; 
    background: yellow; 
} 
#one{ 
    background: red; 
    min-height:100px; 
    max-height: 50%; 
    padding: 10px; 
} 
#two{ 
    background: blue; 
    height: 40%; 
} 

Div hai sẽ không xuất hiện. Khi bạn thay đổi css của cha mẹ của mình (div một) từ này max-height:50% này: height:50% div hai sẽ xuất hiện bởi vì nó biết những gì chiều cao của cha mẹ của mình là vì nó được xác định rõ ràng. Câu hỏi của tôi là có một cách để làm cho div hai xuất hiện trong khi sử dụng (min/max)-height và không height

Đây là một fiddle

Answer 1

Nếu bạn không xác định chiều cao, hoặc bạn chỉ định chiều cao của percetage nhưng không đưa ra parenet nó một định chiều cao, phần tử khối sẽ thay đổi kích thước thành chiều cao nội dung (0px đối với #two trong trường hợp này).

Longer Explain

Vì vậy, chỉ cần thiết lập chiều cao để min-height, vì DOM chiều cao sẽ bắt đầu từ min-height mà không chỉ định chiều cao.

jsFiddle

#one{ 
    background: red; 
    min-height: 100px; 
    height: 100px; 
    max-height: 50%; 
    padding: 10px; 
} 

Answer 2

Kiểm tra này ra, bạn đang thiếu một mảnh nhỏ. Giả sử bạn muốn đặt chiều cao của #one so với #container và #two so với #one (đó là những gì tôi nghĩ bạn sẽ làm). Chúng tôi cần một tuyên bố chiều cao của #one để có được chiều cao từ #two. Bí quyết ở đây là đặt chiều cao tối đa, chiều cao tối thiểu và chiều cao cho phần tử, do đó cho nó chiều cao bị giới hạn bởi min và giá trị tối đa.

Hãy thử css này:

<style> 
#container{ 
    height: 74vh; 
    background: yellow; 
} 
#one{ 
    background: red; 
    min-height:100px; 
    max-height: 50%; 
    height: 100%; 
    padding: 10px; 
} 
#two{ 
    background: blue; 
    height: 40%; 
} 
</style> 

Chiều cao không bao giờ đạt được bởi vì nó bị hạn chế bởi max-height, nhưng không khai báo chiều cao đó là chiều cao: ô tô, đó là không khai báo. Tôi thiết lập chiều cao của #container là 74vh để làm cho toàn bộ điều đáp ứng theo kích thước của khung nhìn.