Chiều cao CSS hoạt động nhưng chiều cao tối thiểu không hoạt động

Question

Tôi đang gặp một vấn đề lạ kỳ lạ. Vấn đề là một vấn đề nhỏ là tôi muốn đặt chiều cao tối thiểu thành 100% đó là nội dung của trang nên mở rộng toàn bộ màn hình của người dùng và nếu có thể, trang sẽ mở rộng xuống nếu nội dung vượt quá 100%. Một cách đơn giản là đặt chiều cao tối thiểu: 100% và để đặt chiều cao: tự động chính xác những gì tôi muốn nhưng bất kể số lần tôi thử, sự cố vẫn còn đó.

Tôi đang sử dụng độ cao tự động và chiều cao tối thiểu: 100% trên tất cả các phần tử nhưng nó không hoạt động. Nếu tôi loại bỏ chiều cao tối thiểu để chỉ bao gồm chiều cao: 100% thì nó hoạt động như một nét duyên dáng nhưng sau đó khi nội dung lớn hơn, nó sẽ tràn toàn bộ chân trang.

Xin hãy giúp tôi đây là css:

html, body, container, row, col-lg-3, col-lg-9 { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 
.container { 
    max-width: 1170px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 
.col-lg-3 { 
    min-height:100%; 
    height:100%; 
} 
.col-lg-9 { 
    min-height: 100%; 
    height: 100%; 
} 

Dưới đây là trang cho thấy các vấn đề: http://contestlancer.com/ai/GP/

Answer 1

Có điều này là một nỗi đau nhưng đó là cách nó hoạt động. Chiều cao có thể được thừa kế từ bố mẹ bố trí nhưng không phải khi chúng có thuộc tính min-height.

Children of yếu tố mà có một bộ min-height để 100% không thể thừa hưởng chiều cao của cha mẹ thông qua tỷ lệ phần trăm ...

https://stackoverflow.com/a/8468131/1491212

CSS2.1 số kỹ thuật:

Tỷ lệ được tính đối với đến chiều cao của khối chứa của hộp được tạo ra . Nếu chiều cao của khối chứa không được chỉ định rõ ràng (nghĩa là nó phụ thuộc vào nội dung chiều cao) và phần tử này không được định vị hoàn toàn, giá trị tính cho 'tự động'.

Sử dụng position: relative; height: 100% trên các thùng chứa để khắc phục sự cố và thêm min-height: 100%; cho trẻ sâu nhất.