JS CSS border-bottom на результаты автозаполнения - PullRequest
Новая
       2

JS CSS border-bottom на результаты автозаполнения

0 голосов
/ 06 октября 2011

Это может быть трудно показать, что именно я пытаюсь выполнить, поэтому, пожалуйста, потерпите меня.

У меня есть окно результатов автозаполнения. У меня неправильный стиль.

Здесь есть 2 деления: 

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

Хорошо, теперь проблема.С этим стилем внутренний div SearchResults стилирует границу.Это хорошо, если есть, скажем, 2 результата.

При наличии переполнения-y нижняя граница исчезает до тех пор, пока пользователь не перейдет к нижней части.

Если я добавлю border-bottom в SearchResultsContainer, граница будет размещена в нижней частиВысота SearchResultsContainer 200px, независимо от того, сколько результатов, поэтому он выглядит как плавающая линия на экране ..

Каков наилучший способ обработки нижней границы?Я нашел несколько методов в Google, чтобы определить, активны ли полосы прокрутки в div, но есть ли более корректный способ обработки нижней границы?

Надеюсь, я объяснил проблему достаточно хорошо, если нет, спросите!

Спасибо

1 Ответ

0 голосов
/ 06 октября 2011

По сути, желаемая функциональность заключается в том, чтобы граница расширялась с содержимым до определенной точки, а затем выполняла прокрутку содержимого.Это можно сделать с помощью атрибута max-height. 

max-height:150px;

http://jsfiddle.net/6bbQT/

...