0

これは私が達成しようとしていることを正確に示すのは難しいかもしれませんので、ご容赦ください。

オートコンプリートの結果ボックスがありますが、スタイルに問題があります。

ここに2つのdivがあります：

<div id="SearchResultsContainer">
<div id="SearchResults">

</div>
</div>

このCSSで：

#SearchResults {
    border: 2px solid #666;
    margin: 0px auto;
    width: 100%;
}

#SearchResultsContainer {
    margin: 0px auto;
    width: 54%;
    height: 200px;
    overflow-y: auto;
    display: none;
    padding-right: 4px;
}

さて、問題についてです。このスタイル設定では、内側のSearchResultsdivが境界線のスタイルを設定します。たとえば2つの結果がある場合、これは問題ありません。

オーバーフローyがある場合、ユーザーが下にスクロールするまで下の境界線は消えます。

SearchResultsContainerにborder-bottomを追加すると、結果の数に関係なく、境界線は200pxの高さのSearchResultsContainerの下部に配置されるため、画面全体に浮かぶ線のように見えます。

ボーダーボトムを処理するための最良の方法は何ですか？スクロールバーがdivでアクティブであるかどうかを判断するために、Googleでいくつかの方法を見つけましたが、下の境界線を処理するためのより適切な方法はありますか？

問題を十分に説明できたと思いますが、そうでない場合は質問してください。

ありがとう

4

1 に答える 1

0

基本的に必要な機能は、特定のポイントまでコンテンツとともに境界線を拡張してから、コンテンツをスクロール可能にすることです。これは、max-height属性を使用して実行できます。

max-height:150px;

http://jsfiddle.net/6bbQT/

于 2011-10-06T18:02:58.513 に答える