1

スクロール可能な固定要素の高さがフッターまでのすべての空白に適合するようにする方法を探しています。

私が取り組んでいるレイアウトである次のフィドルを参照してください。

これで 2 日間立ち往生しており、そろそろ先に進む時が来ました。

Firefox のフィドル、何らかの理由でサイドバーのスクロールバーがクロムでスクロールしないことを確認する方が良いですが、それは別の問題です。

<header></header>
<div id="platformContainer">

    <section id="platformContent">
        <div id="platformBody">        
             <ul class="mainList">
                 ...                 
            </ul>
        </div>
    </section>

  <section id="toolBarContainer">
    <div id="toolBarContent">
        <ul id="toolBarList">
            ...
        </ul>
    </div>
</section>

<footer></footer>

4

1 に答える 1

2

toolBarListコンテナの高さを 100%にしたいと仮定すると、これはすでに持っているものです。サイドバーの高さは100% です。ただし、内のリストは 200px にのみ設定されています。

#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
    height: 200px;
    ...
}

これを に変更するとheight:100%;、ドキュメントの高さ全体を埋めます。現在の問題は、ヘッダーとフッターの説明です。ただし、これはよくある質問であり、他の多くの人々と同様に、https ://stackoverflow.com/a/14892331/1317805 で自分で答えました。ヘッダーとフッターがコンテンツ領域によって隠されたり、覆われていないことを確認する必要があります。

これを行うにはJavaScriptが必要かもしれないと思います – 9edge

全くない！

sectionまた、タグを使用する場合は次の点に注意してください。

この要素の使用は、特定の方法で視覚的にスタイルを設定する必要があるコンテンツを概説するものと考えてはなりません。この場合、作成者は意味的に中立な div を使用することをお勧めします。

スタイリング#platformContentによって#toolBarContainer、予期しない結果が生じる場合があります。

http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements

実際、これらのセクションのスタイリングは、次のように完全に置き換えることができます。

#platformBody, #toolBarContent {
    position:relative;
    height:100%;
    top: 70px;
    width: 100%;   
}
于 2013-02-22T09:09:23.010 に答える