Đặt một câu trả lời, như danh tiếng của tôi không đủ để bình luận. Nhưng đừng xem đây là một câu trả lời, chỉ là một thông tin bổ sung, như bản thân tôi, có một số vấn đề với cả chân trang và định vị.
Khi thiết lập trang, để chân trang của tôi luôn ở dưới cùng, với vị trí tuyệt đối và thùng chứa / trình bao chính với vị trí tương đối.
Sau đó, tôi đã tìm thấy một số vấn đề với nội dung văn bản của mình và một menu bên trong cùng một nội dung (phần trắng của trang giữa đầu trang và chân trang), khi đặt chúng thành tuyệt đối, chân trang không còn ở lại.
Postitioning là, như bạn nói một chủ đề phức tạp.
Giải pháp của tôi, đối với nội dung tôi muốn ở vị trí 'tuyệt đối' trong trang web của mình và không bị đẩy sang một bên, khi ví dụ mở menu thả xuống, là thực sự cung cấp cho nó bài đăng tương đối, và đặt nó xuống dưới 35em thực đơn. (35em là chiều cao của menu thả xuống của tôi, khi được mở rộng hoàn toàn)
Sau đó, Top: -35em, cho nội dung mà trước đó đã được đẩy sang một bên. Và sau đó thêm lề dưới: -35em. Bằng cách này, nội dung là "bên dưới" menu thả xuống của tôi, nhưng trực quan nó nằm cạnh menu thả xuống của tôi! Và khoảng trắng bên dưới xuống chân trang, chỉ có lề 10em, như trước khi bắt đầu chơi với cái này. Vì vậy, giải pháp của tôi cho vấn đề này là như thế này:
html, body {
margin:0;
padding:0;
height:100%;
}
h1 {
margin:0;
}
#webpage {
position:relative;
min-height:100%;
margin:0;
overflow:auto;
}
#header {
height:5em;
width:100%;
padding:0;
margin:0;
}
#text {
position:relative;
margin-bottom:-32em;
padding-top:2em;
padding-right:2em;
padding-bottom:10em;
background-repeat:no-repeat;
width:70%;
padding-left:auto;
margin-left:auto;
margin-right:auto;
right:10em;
float:right;
top:-32em;
}
#dropdown {
position:absolute;
left:0;
width:20%;
clear:both;
display:block;
position:relative;
top:1em;
height:35em;
}
#footer {
position:absolute;
width:100%;
right:0;
bottom:0;
height:5em;
margin:0;
margin-top:5em;
}
Tôi thấy câu hỏi của bạn được trả lời tốt, nhưng sau khi gặp nhiều rắc rối, tôi thấy đây là một giải pháp rất tốt và là cách để hiểu rõ hơn về cách định vị hoạt động .. Khi tôi đặt nội dung văn bản của mình, bên dưới trình đơn thả xuống của tôi, nó không ' t đẩy văn bản của tôi sang một bên. Nếu tôi thay đổi văn bản thành vị trí tuyệt đối, chân trang sẽ không giữ nguyên vị trí. Vì tôi có thể tin rằng đây là một vấn đề đối với nhiều người hơn tôi, tôi thêm điều này vào đây. Điều thực sự xảy ra, là tôi đặt văn bản, 35em, bên dưới phần thả xuống của tôi.
Sau đó, tôi trực quan đặt nó ngay bên cạnh nhau, với vị trí tương đối và trên cùng: -35em;, và buổi tối ra khỏi không gian rộng lớn bên dưới, với lề: -35em;
giá trị tiêu cực được đánh giá thấp đôi khi, chức năng rất tốt, khi một người hiểu các vị trí này tốt hơn!
Đương nhiên, vị trí cố định, cũng có vẻ logic cho chân trang của tôi, nhưng tôi thực sự muốn chân trang đi bên dưới khung nhìn, nếu văn bản hoặc nội dung, dài hơn khung nhìn. Và để ở dưới cùng, nếu có ít nội dung trên trang.
Thiết lập này đã sửa lỗi rất độc đáo và nhớ sử dụng 'em', không phải 'px' để bố trí trang linh hoạt / linh hoạt hơn! :)
(có thể có các giải pháp tốt hơn, nhưng điều này hiệu quả với tôi trên nhiều nền tảng, cũng như các thiết bị).
