Tôi muốn sử dụng một ứng dụng có chiều cao đầy đủ bằng flexbox. Tôi đã tìm thấy thứ mình muốn bằng cách sử dụng mô-đun bố cục flexbox cũ ( display: box;và những thứ khác) trong liên kết này: Ứng dụng CSS3 Flexbox full-height và tràn
Đây là một giải pháp chính xác cho các trình duyệt chỉ hỗ trợ phiên bản cũ của các thuộc tính CSS flexbox.
Nếu tôi muốn thử sử dụng các thuộc tính flexbox mới hơn, tôi sẽ thử sử dụng giải pháp thứ hai trong cùng một liên kết được liệt kê dưới dạng hack: sử dụng vùng chứa với height: 0px;. Nó giúp hiển thị một cuộn dọc.
Tôi không thích nó cho lắm vì nó giới thiệu các vấn đề khác và nó là một cách giải quyết hơn là một giải pháp.
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#container article {
flex: 1 1 auto;
overflow-y: scroll;
}
#container header {
background-color: gray;
}
#container footer {
background-color: gray;
}<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
This is the content that
<br />
With a lot of lines.
<br />
With a lot of lines.
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
</article>
<footer id="footer" >This is a footer</footer>
</section>Tôi cũng đã chuẩn bị một JSFiddle với một ví dụ cơ bản: http://jsfiddle.net/ch7n6/
Đây là một trang web HTML có chiều cao đầy đủ và chân trang nằm ở dưới cùng do thuộc tính flexbox của phần tử nội dung. Tôi khuyên bạn nên di chuyển thanh giữa mã CSS và kết quả để mô phỏng chiều cao khác nhau.
flex-shrink:0cho cả đầu trang và chân trang.