Ví dụ stackoverflow có một topbar cho các thành viên mới. Thanh trên cùng được cố định và đẩy xuống trang mà không chồng chéo lên đầu trang.Cách tốt nhất để thực hiện một thanh dẫn cố định không chồng chéo lên trên là gì?
Điều này được thực hiện như thế nào?
Javascript? Hoặc điều này có thể được thực hiện chỉ với css?
Nếu thanh là position: fixed, một cách để ngăn chặn nội dung trùng lặp là đặt chiều cao tĩnh và sau đó đặt lề trên trên vùng chứa chính có cùng chiều cao.
Nếu bạn không biết chiều cao của div cố định trước, bạn phải sử dụng JS để khám phá chiều cao của nó và đặt lề container tương ứng.
Bạn có thể làm điều đó chỉ với CSS.
Đây là một bài viết tuyệt vời về cách tạo "chén thánh" của thiết kế css.
Trang có ba cột. Một thanh bên trái chiều rộng cố định cho menu, thanh bên phải cho quảng cáo hoặc ảnh của bạn và trung tâm có thể mở rộng với nội dung.
Xem:
Trong tìm kiếm của Chén Thánh: CSS
Bạn có thể làm một cái gì đó như thế này để tạo ra một tiêu đề cố định:
<style>
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content { padding-top: 50px; }
</style>
<body>
<div class="header">header</div>
<div class="content">content</div>
</body>
lẽ kiểm tra IE5.5/ie6.0 sửa ở đây: http://www.howtocreate.co.uk/fixedPosition.html
làm cách nào để tạo chân trang cố định? – jondinham
Áp dụng mã của Michiel cho câu hỏi của OP trong phản hồi của ben_h.
<style type="text/css">
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content{ /* normal stuff here */ }
/*** Only selects div.content immediately preceded by div.header.
If div.header doesn't appear, it won't select. ***/
div.header + div.content { padding-top: 50px; }
</style>
<body>
<div class="header">header</div>
<div class="content">content</div>
</body>
tôi sẽ cảnh báo bạn rằng ol' IE6 không sẽ là quá ngây thơ đó, nhưng IE7.js Dean Edwards sẽ thêm hỗ trợ cho các anh chị em chọn (+).
Vì vậy, không có cách nào để làm điều đó với quyền css? Tôi biết chiều cao của thanh, nhưng tôi không biết có hay không nó xuất hiện, không có cách nào để kiểm tra với css? Tôi chỉ chụp từ hông nhưng có lẽ sử dụng sáng tạo các bộ chọn css? Bất kỳ ai? –