如何使用CSS 3和html5製作響應式固定標題

我正在嘗試製作一個簡單而響應式的佈局。我能夠使#container和#content響應，但固定的#header保持原位並在調整瀏覽器窗口大小時溢出。無論如何有一箇中心的，固定的，特定長度的頭部，這是有反應的？如果您將瀏覽器窗口向左推，則會看到我在說什麼。我覺得解決方案很簡單，只需要CSS？如何使用CSS 3和html5製作響應式固定標題

下面是示例網頁Sample Site

另外，側面的問題：如果我在頭添加圖像，將相同的（潛在的）解決方案適用？

來源

2015-02-07 Ravi Kumar

這是我最近的響應式固定標題的代碼。我希望這有幫助。

HTML

<div id="header"> 
     <p id="headerp">Ryan Noack</p> 
    <table id="table"> 
     <tr> 
      <td id="headertd1"><a href="bio.html">Bio</a></td> 
      <td id="headertd2"><a href="Video.html">Videos</a></td> 
      <td id="headertd3"><a href="https://www.google.com/calendar/render?mode=day&date=20150205T165337&pli=1#h%7Cmonth-3+23105+23132+23109" >Calendar</a> 
      </td> 
     </tr> 
    </table> 
    </div>

CSS

@media only screen and (min-width: 1800px) and (max-width: 2250px) { 

body{ 
    background-image: url(abstract_0014.jpg); 
    background-size: cover; 
    postition: relative; 
    align: center; 
    margin: auto; 
    height: 100%; 
    max-width: 1950px; 

}

注1950px的最大寬度。這將使您的標題不會在較大的屏幕尺寸上變得過度。使用身體作爲容器，標題將跨越身體的整個寬度。

#header{ 

    position: relative; 
    background-size: 100%; 
    border-radius: 20px; 
    margin: 0 auto; 
    padding-bottom: 1%; 
    padding-top: 1%; 

} 
}

來源

2015-02-07 12:00:22

感謝帕特里克爲您的示例代碼。 – 2015-02-07 14:35:29

我發現它與CSS一起工作的唯一途徑是通過給予適當的左邊和右邊屬性頭。

#header { 
position: fixed; 
top: 0; 
text-align:center; 
background-color: grey; 
right:10%; 
left:10%; 
}

這可能不是你正在尋找的東西，但可能會有所幫助。

這裏是鏈接到jsfiddle

來源

2015-02-07 12:25:14

感謝亞當的演示鏈接它的工作原理。 – 2015-02-07 14:34:32

我發現這個網站，這是一個教程製作的首部固定和響應，但它使用jQuery的，也有一個JavaScript替代說什麼，但顯然這需要大量的碼。 Website Link

來源

2016-02-07 21:49:14 Jake

如何使用CSS 3和html5製作響應式固定標題

回答

相關問題