css - オーバーフロー: コンテンツの一部にのみスクロールバーを表示するスクロール

Question

以下に、私が作成したインターフェイスの画像を示します。

検索バーの下に表示されるスクロールバーのみが必要です。ページのこの部分にはページの ID があります。そこで、体の高さを 100% に設定し、その位置を相対に設定しました。次に、ページの高さを 100% に設定し、絶対位置に設定しました。これを行った後、スクロールバーを取得しますが、コンテンツがうまく押しつぶされた場合にのみ表示されます。

スクロールバーは、ウィンドウが小さいときだけでなく、コンテンツ全体に表示する必要があります。どんな助けでも大歓迎です。以下に、役立つコードをいくつか貼り付けました。

body {
    font-family: Helvetica, Arial, sans-serif;
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top,  #efefef 0%, #e0e0e0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #efefef 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #efefef 0%,#e0e0e0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #efefef 0%,#e0e0e0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #efefef 0%,#e0e0e0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    overflow: hidden;
    position: relative;
}

#page {
    padding: .4em 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    position: absolute;
}