12

Web サイトがあり、スクロールバーに問題があります。

私が欲しいものは、この画像で最もよく説明できます。

私のウェブサイト

しかし、このようにスクロールバーを取得できません。

私はいくつか試しましたが、ここにjsfiddleがあります

このフィドルには次のものもあります。

div[role="main"]
{
    overflow-y: scroll;
    margin: 60px 0;
}

しかし、この余白は問題です。ヘッダーとフッターの高さを知らずに必要な余白を知るにはどうすればよいでしょうか。

4

4 に答える 4

13

これは、body に padding と box-sizing = border-box を使用することで遅くすることができます (body の高さが 100% の場合、パディングが高さにカウントされるため、スクロールのあるボックスはヘッダーとフッターの間に正確に配置されます)。

html {
 overflow: hidden;
 height: 100%;
}

body {
 padding: 60px 0px;
 height: 100%;
 box-sizing: border-box;
}

div[role="main"] {
 overflow-y: scroll;
 height: 100%;
}

http://jsfiddle.net/wPucQ/を参照

編集: コードに忘れられていた HTML タグを追加しました

于 2012-12-06T11:01:31.413 に答える
2

スクロールバーの位置を計算できるように、スクロール可能な要素に高さを与える必要があります。

div[role="main"]
{
    height:400px;
    overflow-y: scroll;
    margin: 60px 0;
}

http://jsfiddle.net/gkxV4/

于 2012-12-06T11:01:50.543 に答える
0

この div の Min-height または height に言及してみてください div[role="main"]{ overflow-y: scroll; マージン: 60px 0; 最小高さ:400px;}

于 2012-12-06T10:50:03.210 に答える
-1

ロジックフィドル全体については、私のフィドルを参照してください http://jsfiddle.net/MA9k3/7

Jクエリコード:

var doc_height = $(window).innerHeight();

var header_height = $("header").height();
var footer_height = $("footer").height();

var div_height = doc_height - (header_height + footer_height);

$("#content").css({
    "height": (div_height - footer_height) + "px",
    "margin-bottom": footer_height + "px"
});

alert($("#content").height());
于 2012-12-06T11:24:35.170 に答える