div sau một div mà vị trí cố định trong css

Question

Tôi đã thực hiện một div và tôi đã cho nó position: fixed sử dụng biểu định kiểu này:

CSS

position: fixed; 
top: 35px; 
z-index: 9999; 
height:60px; 
background:#000; 
width:100%; 

Bây giờ những gì tôi muốn là : nếu div này có chiều cao bằng không, thì div chỉ sau khi được đặt ở vị trí div trên. nếu chiều cao của div không bằng không, div tiếp theo sau div này sẽ có lề từ div trên để cả div sẽ không chồng lên nhau.

Answer 1

Khi bạn có một phần tử cố định (hoặc tuyệt đối), không có phần tử nào sau nó. Phần tử cố định được lấy ra khỏi luồng tài liệu.

Nếu bạn muốn hai phần tử ở vị trí cố định ở vị trí cố định, hãy tạo một thùng chứa cố định và đặt hai phần tử bên trong nó.

Bạn có thể đặt một vùng chứa khác có lề trên cùng xung quanh và đặt lề trên trên phần tử thứ hai. Nếu phần tử đầu tiên trống, không có gì để có lề, vì vậy lề sẽ sụp đổ bên ngoài vùng chứa và phần tử thứ hai sẽ nằm ở trên cùng của vùng chứa.

(Container thứ hai là cần thiết vì lợi nhuận sẽ không sụp đổ bên ngoài các yếu tố cố định.)

Demo: http://jsfiddle.net/Guffa/r5crS/

Answer 2

Nếu bạn có thể sử dụng jQuery:

$(document).ready(function() { 
    var height = $("#one").height(); 
    if(height > 0) 
    { 
     $("#two").css("margin-top","10px"); 
    } 
}); 

Demo

Answer 3

Các áp phích khác là chính xác trong thiết lập đó position: fixed cho phần tử bố cục ngắt tài liệu fl ow; đôi khi được dự định (chẳng hạn như điều hướng vị trí cố định).

Dưới đây là một đoạn jQuery Tôi đã sử dụng để phá vỡ các vấn đề trong bố trí chất lỏng mà chiều cao của menu có thể thay đổi:

var menuHeight = $("header").height(); 
$("main").css("padding-top", menuHeight); 
$(window).resize(function() { 
    var menuHeight = $("header").height(); 
    $("main").css("padding-top", menuHeight); 
}); 

chính là nội dung chính trên trang web của tôi, như chiều rộng của trang thay đổi phần đệm ở phía trên cùng của nội dung chính thay đổi theo chiều cao của phần tử tiêu đề, bắt chước phần tử đó trong luồng tài liệu.

Lưu ý: mã chạy một lần khi tải (cho các kích thước thiết bị khác nhau) và thay đổi kích thước cửa sổ (để thay đổi kích thước cửa sổ người dùng). Điều này có thể dễ dàng được neater, nhưng nó hoạt động tốt cho tôi.