2

ヘッダーを修正したい: ヘッダーは常にページの上部にあり、コンテンツ全体 (フッターを含むすべて) をスクロールできます。以下に示すように、ヘッダーの高さは 60 ピクセルであり、上部に固定しても問題ありません。

私が解決したい問題 (CSS のみを使用) は、スクロールバーを上から 60 ピクセルより下に配置することです。 ご覧のとおり、スクロールバーの下部 (2. 矢印) は実際には非表示/下に移動しています。問題のある60pxで推測します。したがって、次のようになります。

スクロール・バー

HTML:

<!DOCTYPE html>
<head>
...
</head>

<body>
    <header>
        ...
    </header>

    <div id="content">
        ...
    </div>
</body>
</html>

CSS:

html, body {
    height: 100%;
}

body {
    background: #d0d0d0;
    overflow-y: hidden; 
}

header { 
    background: #fff;
    height: 60px;
    width: 100%;

    position: fixed;
    top: 0;
}


#content {
    margin-top: 60px;
    height: 100%; 
    width: 100%;

    overflow-y: scroll;
}

私のCSSには何が欠けていますか? みんなありがとう。

//ここで最初の回答への返信として編集します（John Greyへ）

あなたのコメントの下にコメント：

scrollbar_2

4

3 に答える 3

2

あなたの問題を解決する方法はjsfiddleです： http://jsfiddle.net/sTSFJ/2/

CSSは次のとおりです。

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

#wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}

#header {
    height: 40px;
    background-color: blue;
    color: #fff;
}

#content {
    position:absolute;
    bottom:0px;
    top: 40px;
    width:100%;
    overflow: scroll;
    background-color: #fff;
    color: #666;
}​
于 2012-11-02T10:45:24.227 に答える
0

あなたの #content の高さは体の高さと同じですが、ヘッダーがあるので...これを使用してみてください：

html, body {
    height: 100%;
}

body {
    background: #d0d0d0;
    overflow-y: hidden; 
}

header { 
    background: #fff;
    height: 5%;
    width: 100%;

    position: fixed;
    top: 0;
}


#content {
    margin-top: 5%;
    height: 95%; 
    width: 100%;

    overflow-y: scroll;
}
于 2012-11-02T10:16:12.330 に答える