头在固定的地方

我有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

头在固定的地方

回答

相关问题