3

ヘッダーとフッターが固定された水平スクロール Web サイトを実現しようとしています。

目標: 1. ヘッダーとフッターを固定する 2. 垂直スクロールを行わない 3. ヘッダーとフッターの間のすべてのスペースをコンテンツ div で埋める

コンテンツで position: absolute を使用して、height:100% がヘッダーとフッターの間の領域を占めるようにしました。(私の 3 番目の目標) ただし、これにより、垂直スクロールバーも表示されます。

ライブデモ: http://jsfiddle.net/wQ2XR/230/

垂直スクロールバーを表示せずに目標を達成するにはどうすればよいですか?

事前にどうもありがとう！

HTML コード:

    <div id="total">
        <header id="1">
            <div id="a">
                    <h1>Header</h1>

            </div>
        </header>

        <div id="2">
            <div id="b">
                <div id="bb">
                    <h2>Post Title Example One</h2> 
                <p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
                </div>
            </div>
        </div>
        <footer id="3">
            <div id="c">
                    <h1>footer</h1>

            </div>
        </footer>
    </div>

CSS:

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    width: 100%;
}

header {
}

#a {
    position: fixed;
    height: 50px;
    top: 0;
    width: 100%;
    background-color: blue;
}

 #2 {
    position: relative;
    padding: 50px 0 25px 0;
}

#b {
    height: 100%;
    position: absolute;
}

#bb {
    position: relative;
    height: 100%;
    margin: 50px 0 0 0;
    width: 2000px;
    background-color: yellow;
}

 footer {
}

#c {
    position: fixed;
    height: 25px;
    bottom: 0;
    width: 100%;
    background-color: green;
}
4

2 に答える 2

4

うーん、問題は、ヘッダーとフッターの間のコンテンツのラッパーがビューポートの高さをheight:100%. そのため、マージンを適用してこれらのコンテンツ ラッパーを垂直方向にオフセットすると (ヘッダーが表示されるように)、ビューポート (50px、ヘッダーの高さ) よりはるかに下に押し出されます。その結果、垂直スクロールバーが表示されます。これは、コンテンツ ラッパーがビューポートの高さ全体で押し下げられているため、画面に収まらないためです。

これを回避する方法は？フッターとヘッダーの高さが動的でない場合 (つまり、CSS を使用して高さを常に制御できます)、 を使用してかなり簡単な方法でこれを実現できますposition:absolute。

あなたの構造は少し修正しました。#2and要素を削除しました。実際のコンテンツを含む要素である#bposition/size を適切に配置するためだけにあるように見えるためです。#bb

<div id="total">
    <header id="1">
        <div id="a">
            <h1>Header</h1>
        </div>
    </header>
    <div id="bb">
        <h2>Post Title Example One</h2> 
        <p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
    </div>
    <footer id="3">
        <div id="c">
            <h1>footer</h1>
        </div>
    </footer>
</div>

さて、あなたの CSS で、スタイリング#2との定義を削除しました#b。さらに、#bbCSS を次のように変更しました。

#bb {
    position: absolute;
    top: 50px;
    bottom: 25px;
    width: 2000px;
    background-color: yellow;
}

これが何を達成するかを示すために更新された JSFiddleを次に示します。さらに、回答の 1 つでコメントとして指定した複数行レイアウトを実装する JSFiddleを次に示します。

overflow:hiddenうまく機能しない理由は、#bb実際にはまだビューポートの下に伸びているためです。オーバーフローした領域がブラウザによって無視されるため、垂直スクロールバーは作成されません。ただし、パーセンテージの高さを使用すると、の高さ#bbが目に見えるものではないことが明らかになります。とにかく、これが役に立てば幸いです！これがあなたが探していたものでない場合はお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-08-13T17:59:36.673 に答える
-2

スクロールバーを非表示にするには:

overflow: hidden;

ただし、テキストはどこかに移動する必要があるため (そうしないと非表示になります)、コンテナーを大きくするか、テキスト列を使用する必要があります。

スクロール用に Windows 8 Metro UI のようなものを実現するつもりですか?

于 2013-08-13T13:51:54.873 に答える