Làm thế nào để tạo chân chất lỏng dính

Tôi đang tìm một giải pháp để có chân trang dính có chiều cao có thể phụ thuộc vào chiều rộng của trình duyệt.Làm thế nào để tạo chân chất lỏng dính

Chân trang được chú ý trong thiết kế chất lỏng không phải là tất cả không đáng kể. Tôi đã tìm thấy gợi ý, thảo luận và giải pháp để triển khai các chân trang dính. Tuy nhiên, tất cả những điều này phụ thuộc vào chiều cao cố định và đã biết của chân trang. Trong trường hợp của tôi, chiều cao của chân trang chứa văn bản và số dòng phụ thuộc vào chiều rộng của màn hình.

Thay vì thực hiện các loại truy vấn phương tiện và xây dựng một số công việc, tôi sẽ thích một giải pháp CSS gọn gàng trong đó chân trang dính tự động điều chỉnh khi chiều rộng của màn hình thay đổi.

Có ai trong số các bạn có câu trả lời cuối cùng không?

Nguồn

2013-06-03 Paul van Haren

thể trùng lặp của [CSS Chú ý Footers với Unknown Chiều cao] (http://stackoverflow.com/questions/4347133/css-sticky-footers-with-unknown-height) – cimmanon

Vâng, câu hỏi là loại một trùng lặp, nhưng câu trả lời là không thỏa đáng. May mắn thay, nó đã chỉ cho tôi một bài đăng khác có hướng dẫn phù hợp với nhu cầu của tôi: http://stackoverflow.com/questions/12605816/sticky-flexible-footers-and-headers-css-working-fine-in-webkit-but- không-trong-tắc kè. Cảm ơn đã xem xét này. –

Bạn không đề cập đến một trong các thành phần có 'overflow: scroll' trên đó. – cimmanon

Hãy thử một cái gì đó như thế này:

http://jsfiddle.net/6BQWE/2/

Trường hợp chiều cao của chân dính là tương đối so với chiều cao của container, với một tỷ lệ phần trăm:

#sticky_footer { 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:10%; 
    background:red; 
    text-align:center; 
}

Bạn có thể cần phải sắp xếp ra một số lề/đệm cho văn bản có truy vấn phương tiện nhưng kích thước chân trang sẽ là động mà không có chúng.

Nguồn

2013-06-03 17:29:05 peterpixels

Chào mừng bạn đến với thế giới huyền diệu của flexbox! Hãy thử điều này ra ... http://jsfiddle.net/n5BaR/

<body> 
    <style> 
     body { 
      padding: 0; margin: 0; 
      display: flex; 
      min-height: 100vh; 
      flex-direction: column; 
     } 
     main { 
      flex: 1; 
      padding: 1em; 
     } 
     header, footer { 
      background-color: #abc; 
      padding: 1em; 
     } 
    </style> 
    <header>Hello World</header> 
    <main>Content</main> 
    <footer> 
     Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque. 
    </footer> 
</body>

Các miếng đệm và lợi nhuận chỉ là một chút xinh đẹp, nhưng sự kỳ diệu xảy ra với display: flex; min-height: 100vh; flex-direction: column; và flex: 1;.

Để biết thêm thông tin và ví dụ khác, xem http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Từ Mozilla ...

Các CSS3 Flexible Box, hoặc flexbox, là một chế độ bố trí cung cấp cho sắp xếp các yếu tố trên một trang sao cho các phần tử hoạt động có thể dự đoán khi bố cục trang phải chứa các màn hình khác nhau và các thiết bị hiển thị khác nhau. ... Lưu ý: Mặc dù CSS Flexible Đặc điểm bố cục hộp là ở giai đoạn Đề xuất ứng cử viên, không phải tất cả các trình duyệt đều đã triển khai nó.

Nguồn

2013-12-06 19:51:49 Luke

Đây phải là câu trả lời số 1. Tôi đã đào tạo rất nhiều bài viết tối nay. Rất vui, tôi đã tìm thấy bạn! –

Làm thế nào để tạo chân chất lỏng dính

Trả lời

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