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;
}