頭在固定的地方

我有HTML這樣的：頭在固定的地方

<article> 
    <header> 
     <hgroup> 
      <h1>Wk 25 </h1> 
      <h2>(18-06 tot 24-06)</h2>   
     </hgroup> 
     <p>Some info</p> 
    </header> 
    <table> 
     <thead> 
      <tr> 
       <th class="legenda">Title</th> 
       <th class="legenda">Title</th> 
       <th class="legenda">Title</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>content</td> 
       <td>content</td> 
       <td>content</td> 
      </tr> 
     </tbody> 
    </table> 
</article>

和CSS（節選）是這樣的：

article { 
    padding: 0; 
    margin-bottom: 15px; 
    overflow: auto; 
} 
article header { 
    background: url('header.png') repeat-x bottom center; 
    padding: 4px 10px; 
    cursor: pointer; 
}

文章元素與瀏覽器窗口大小調整。裏面的表格可以寬於文章元素，因此overflow：auto。但是：標題元素的寬度爲100％，所以如果向右滾動，標題將變爲不可見。

如果我給頭的位置是：絕對的，我需要給它一個固定的高度太：不行，因爲有高度依賴於內容（變化）。

所以事情是，我希望它只是呈現象現在這樣，只是當我滾動到右側，頭保持可見。

來源

2012-06-18 Lennart

一個解決辦法是來包裝你的表在自己的<div>，從<header>分開，有自己的一套滾動條：

<article> 
    <header><!-- ... --></header> 

    <div style="overflow:auto"> 
    <table><!-- ... --></table> 
    </div> 
</article>

這樣一來，頭似乎保持固定，但該表仍然可以左右滾動。

來源

2012-06-18 13:14:12 Brandan

Thx工作正常。並猜測額外的div並不是那麼糟糕。 – Lennart

如果我理解正確的話，溶液應把float:right在頭中。

另一件事：你不能簡單地給出相對（％）值到一個div的高度。有一種方法，但我相信它是從它的父div繼承那個屬性的時候。

來源

2012-06-18 13:08:43 poepje

如果我把浮動：正確的，標題包裝到內容（寬度變化）。如果我將寬度設置爲100％，則滾動也會出現同樣的問題。 – Lennart

如果您希望標題保持在左右和上/下的相同位置，但不想在出現的位置進行硬編碼，您可以嘗試進行具有相對定位的潛水，將其放置在您想要的位置，然後在其中放置一個固定的div。只要你沒有設置頂部/左側/底部/右側，div應該停留在其父節點的0,0處。

來源

2012-06-18 13:18:28 Fewfre

頭在固定的地方

回答

相關問題