Định vị div "bao bọc" bên dưới thanh điều hướng cố định?

Tôi đã bắt đầu làm việc trên một trang web hoàn toàn mới và tôi đã chơi xung quanh với thiết kế một thời gian, tuy nhiên một vấn đề mà tôi dường như gặp phải là định vị thanh điều hướng có chiều rộng toàn màn hình được cố định để cuộn. Bên dưới, tôi đã tạo một div được gọi là "trình bao bọc" được đặt ở giữa ở độ rộng 980px. Dưới đây là ví dụ về mã;Định vị div "bao bọc" bên dưới thanh điều hướng cố định?

<style> 
    #navBar { 
     background: RGB(0, 0, 0); 
     height: 30px; 
     position: fixed; 
     width: 100%; 
    } 

    #wrapper { 
     margin: 0 auto; 
     width: 980px; 
    } 
</style> 

<div id="navBar"> 

</div> 

<div id="wrapper"> 
    <div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div> 
</div>

Hộp tôi tạo ra trong "wrapper" NÊN (rõ ràng không phải là vì tôi đang làm một cái gì đó sai - ở đâu đó) ngồi 5px dưới navBar, tuy nhiên vì tôi đã sử dụng position: fixed nó nằm bên trong nó để thay thế. Ai có thể dẫn tôi đến cách tôi giải quyết vấn đề này và có nó để wrapper ngồi trực tiếp bên dưới chứ không phải là bên dưới thanh điều hướng trong khi duy trì nó là trung tâm?

Nguồn

2013-05-24 Banny

Tôi nghĩ bạn sẽ cần đặt lề trên cho trình bao bọc của bạn bằng chiều cao của thanh điều hướng ... –

Tôi đã thử điều này tuy nhiên vì nó nằm bên dưới thanh điều hướng, nó cũng đẩy thanh điều hướng xuống 30px. Tôi thường giỏi tìm cách giải quyết nhưng có điều gì đó cơ bản như thế này khiến tôi bối rối. – Banny

thiết top:0 trên navbar và thêm 30px margin-top của bạn trên wrapper div của bạn

#navBar { 
    background: RGB(0, 0, 0); 
    height: 30px; 
    position: fixed; 
    width: 100%; 
    top:0 
} 
#wrapper { 
    margin: 30px auto 0; 
    width: 980px; 
}

http://jsfiddle.net/duncan/NkRxQ/

Nguồn

2013-05-24 11:18:25

Brill! dường như đã thực hiện các trick :) Đây có phải là giải pháp cho BẤT CỨ 'vị trí: cố định' vấn đề về chồng chéo? Ngoài ra là có cách nào bạn có thể thấy rằng tôi có thể cải thiện bố trí của tôi hoặc là nó khá nhiều làm thế nào nó nên được? – Banny

Tôi đã làm điều này, nhưng sau đó nếu tôi làm Experience, thanh điều hướng sẽ bao gồm tiêu đề. – Janneman96

Tình huống tương tự với tôi, nơi chiều cao của thanh điều hướng là động (tôi đặt "word-wrap: break-word" trong css). Tôi nên viết gì trong tệp trình bao bọc? –

Hoàn thành giải pháp để giải quyết vấn đề của bạn.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
#navBar { 
    background: RGB(0, 0, 0); 
    height: 30px; 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 
#wrapper { 
    margin: 30px auto; 
    width: 980px; 
    background: #ccc; 
} 
.clear { 
    clear: both; 
} 
</style> 
</head> 
<body> 
<div id="navBar"> 

</div> 

<div id="wrapper"> 
    <div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;"> 
     <!-- You can create left side elements here (without any float specification in CSS) --> 
    </div> 
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;"> 
     <!-- You can create right side elements here (without any float specification in CSS) --> 
    </div> 
    <div class="clear"></div> 
</div> 
</body> 
</html>

Bắt đầu từ trang web thương hiệu mới phải chứa DOCTYPE và 0 lề cho tất cả các thẻ. (Điều rất hữu ích).

Nguồn

2013-05-24 11:31:39

Tôi có thể hỏi những gì rõ ràng được sử dụng cho? Ngoài ra một vấn đề tôi đang gặp là tôi sử dụng các giải pháp được cung cấp dưới đây tuy nhiên mỗi khi tôi tạo ra một yếu tố mới nó chỉ ném bố trí tôi đã tạo ra. Có anyway tôi có thể tạo ra một số hình thức sửa chữa vĩnh viễn để làm cho nó trở nên không bị ảnh hưởng bởi bất kỳ yếu tố khác? Tôi phải sử dụng các yếu tố phong cách 'float' trên mọi yếu tố để giải quyết vấn đề tuy nhiên tôi không muốn nổi tất cả các mục – Banny

. Rõ ràng được sử dụng để làm cho div wrapper xuất hiện. nếu không nó sẽ ở độ cao 1px, bởi vì bạn đã chỉ định float: còn lại cho div bên trong của trình bao bọc div. –

Tôi có nghĩa là bất cứ khi nào tôi tạo ra bất kỳ yếu tố tôi phải áp dụng phao vào nó hoặc nó chỉ đơn giản là phá vỡ bố trí của tôi – Banny

Định vị div "bao bọc" bên dưới thanh điều hướng cố định?

Trả lời

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