vị trí tiêu đề cố định trong html

Question

Tôi có một tiêu đề (chiều cao động) với một vị trí cố định.

Tôi cần đặt div vùng chứa ngay bên dưới tiêu đề. Vì chiều cao tiêu đề là động, tôi không thể sử dụng giá trị cố định cho lề trên.

Làm cách nào để thực hiện điều này?

Dưới đây là CSS của tôi:

#header-wrap { 
    position: fixed; 
    height: auto; 
    width: 100%; 
    z-index: 100 
} 
#container{ 
    /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/ 
} 

... và HTML:

<div id="header-wrap"> 
    <div id="header"> 
    <div id="menu"> 
     <ul> 
     <li><a href="#" class="active">test 0</a></li> 
     <li><a href="#">Give Me <br />test</a></li> 
     <li><a href="#">My <br />test 2</a></li> 
     <li><a href="#">test 4</a></li> 
     </ul> 
    </div> 
    <div class="clear"> 
    </div> 
    </div> 
</div><!-- End of header --> 

<div id="container"> 
</div> 

Answer 1

Vâng! Như tôi đã thấy câu hỏi của tôi bây giờ, tôi nhận ra rằng tôi không muốn đề cập đến giá trị ký quỹ cố định vì chiều cao động của tiêu đề.

Đây là những gì tôi đã sử dụng cho các trường hợp như vậy.

Tính chiều cao tiêu đề bằng cách sử dụng jQuery và áp dụng giá trị đó làm giá trị lợi nhuận cao nhất.

var divHeight = $('#header-wrap').height(); 
$('#container').css('margin-top', divHeight+'px'); 

Demo

Answer 2

#container của bạn nên được bên ngoài của # header-wrap, sau đó xác định chiều cao cố định cho # header- bọc, sau, xác định margin-top cho #container bằng với chiều cao của # header-wrap. Một cái gì đó như thế này:

#header-wrap { 
    position: fixed; 
    height: 200px; 
    top: 0; 
    width: 100%; 
    z-index: 100; 
} 
#container{ 
    margin-top: 200px; 
} 

Hy vọng điều này là những gì bạn cần: http://jsfiddle.net/KTgrS/

Answer 3

tôi giả tiêu đề của bạn là cố định bởi vì bạn muốn nó ở lại ở phía trên cùng của trang, ngay cả khi người dùng cuộn xuống, nhưng bạn không muốn nó bao gồm các container. Tuy nhiên, việc đặt position: fixed sẽ xóa phần tử khỏi bố cục tuyến tính của trang, do đó bạn cần phải đặt lề trên của phần tử "tiếp theo" giống với chiều cao của tiêu đề hoặc (nếu vì lý do nào đó bạn không muốn) t muốn làm điều đó), đặt một phần tử giữ chỗ chiếm không gian trong luồng trang, nhưng sẽ xuất hiện bên dưới nơi tiêu đề hiển thị.

Answer 4

position :fixed khác với bố cục khác. Khi bạn fixed số position cho số header của mình, hãy nhớ rằng bạn phải đặt margin-top cho số content div.

Answer 5

bộ #container div đầu để zero

#container{ 


top: 0; 



} 

Answer 6

body{ 
    margin:0; 
    padding:0 0 0 0; 
} 
div#header{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:25; 
} 
@media screen{ 
body>div#header{ 
    position: fixed; 
} 
} 
* html body{ 
    overflow:hidden; 
} 
* html div#content{ 
    height:100%; 
    overflow:auto; 
}