如何實現一個固定的標題欄工具條

我試圖實現一個固定的標題欄，它適用於所有類型的瀏覽器和移動瀏覽器。如何實現一個固定的標題欄工具條

在下面的代碼中，是否可以避免內容的div元素中的屬性style="padding-top:100px"。我不想手動計算距離的100px。

<html> 

<body> 
    <div id="xheader" style="position:fixed; width:100%; top:0; left:0; right:0; z-index:1000; border:solid 1px red"> 
     <p>FIXED BAR</p> 
    </div> 

    <div id="xcontainer"> 
     <p>Line1</p> 
     <p>Line2</p> 
     <p>Line3</p> 
     <p>Line4</p> 
     <p>Line5</p> 
     <p>Line6</p> 
     <p>Line7</p> 
     <p>Line8</p> 
     <p>Line9</p> 
     <p>Line10</p> 
     <p>Line11</p> 
     <p>Line12</p> 

     <p>Line1</p> 
     <p>Line2</p> 
     <p>Line3</p> 
     <p>Line4</p> 
     <p>Line5</p> 
     <p>Line6</p> 
     <p>Line7</p> 
     <p>Line8</p> 
     <p>Line9</p> 
     <p>Line10</p> 
     <p>Line11</p> 
     <p>Line12</p> 

     <p>Line1</p> 
     <p>Line2</p> 
     <p>Line3</p> 
     <p>Line4</p> 
     <p>Line5</p> 
     <p>Line6</p> 
     <p>Line7</p> 
     <p>Line8</p> 
     <p>Line9</p> 
     <p>Line10</p> 
     <p>Line11</p> 
     <p>Line12</p> 

    </div> 

</body> 

</html>

來源

2012-10-31 webmeiker

使用類爲該DIV與 padding-top: 100px 否則就沒有。

來源

2012-10-31 16:55:58 Morpheus

由於標頭元素被從文檔流中取走（通過position:fixed;），您確實需要以將內容推送到標題下方。但是你可以用更靈活的單位不是像素：

padding-top: 1.5em;

看看這個JSFiddle。

由於ems是相對於父級的字體大小，所以此處的填充將按比例放大或縮小不同的字體大小。或者您可以使用%來指定填充。

來源

2012-10-31 21:07:28 KatieK

我要做到這一點使用jQuery：

var xheaderHeight = $('div#xheader').height(); 
$('div#xcontainer').css('padding-top',xheaderHeight);

感謝您的答覆。

來源

2012-11-01 17:04:35 webmeiker

如何實現一個固定的標題欄工具條

回答

相關問題