0

私はulそれがページの高さです。そのulの中をスクロールできるようにしたいと思います。それはここで見ることができます：http：//d.saew.it/pRyz

ご覧のとおり、ページの高さとしてスクロールできます。さて、あなたがそこに見ることができるように、私はそれにもヘッダーを持たせたいです。上部を「固定」する必要がありますが、ulリストの幅は可変であるため、可変幅の親の中央に配置できないため、固定に設定できません。

これで、ヘッダーがまだその上のスペースを占める一方で、のが親の高さ（ウィンドウと同じ）になるheight: 100%という事実を除いて、私が持っているものはほぼ完全に機能します。したがって、これにより、親要素の端から数ピクセル離れます。それをチェックしてください：http：//d.saew.it/NXL1uldivul

私が純粋なCSSで試していることを達成する方法はありますか？

編集：

コードはスタイラスにありますが、それでも誰でも読むことができるはずです。

div.ul-header
    background-color #E6E6E6
    text-align center
    margin 0
ul
    background-color #E6E6E6
    height 100%
    margin 0
    overflow-x hidden

これらの要素のすべての親はheight: 100%;、ウィンドウの高さに到達できるようにするためにそれらを持っています。

4

1 に答える 1

0

私はあなたが何を望んでいるのか完全にはわかりませんが、これが私の最善の推測です。

基本的に、あなたがしていることは、絶対位置とオーバーフローのルールを使用して、スクロールするものとそれが表示される場所を制御することです。

コンテナはヘッダーとスクロール可能なリストの両方を保持しheight: 100%、ページ本体内にあります。またposition: relative、子要素を絶対的に配置できるようになっています。

子要素（ヘッダーとリスト）の両方に。がありposition: absoluteます。これは、リストの高さを制限（コンテンツがオーバーフローするように）と可変（親の高さに応じて）の両方にすることができるようにするためです。つまり、常に親の高さからの高さを引いたものにする必要があります。ヘッダー。そのプロパティの値は、パディングと境界線を含むヘッダーの全top高に対応する必要があることに注意してください。

次に、スクロールリストを取得するには、リストで使用できますoverflow: auto。

text-align: centerヘッダーの中央に配置されたテキストを取得するのは、コンテナの幅に関係なく機能するのと同じくらい簡単です。

于 2012-09-14T17:39:49.397 に答える