#css #html #scrollbars #border
#css #HTML #полосы прокрутки #граница
Вопрос:
Возможно, будет сложно показать, чего именно я пытаюсь достичь, поэтому, пожалуйста, потерпите меня.
У меня есть окно результатов автозаполнения, у меня возникли проблемы с правильным стилем.
Здесь есть 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;
}
Хорошо, теперь о проблеме. С помощью этого стиля внутренний SearchResults div стилизует границу. Это нормально, если есть, скажем, 2 результата.
При переполнении-y нижняя граница исчезает, пока пользователь не прокрутит страницу вниз.
Если я добавлю border-bottom в SearchResultsContainer, граница будет размещена в нижней части SearchResultsContainer размером 200 пикселей, независимо от того, сколько результатов есть, поэтому она выглядит как плавающая линия по экрану..
Каков наилучший способ обработки нижней границы? Я нашел в Google несколько методов, чтобы определить, активны ли полосы прокрутки в div, но есть ли более подходящий способ обработки нижней границы?
Надеюсь, я достаточно хорошо объяснил проблему, если нет, пожалуйста, спросите!
Спасибо
Комментарии:
1. о, крысы… это, вероятно, бесполезно, но у меня нет времени (нужно обратить внимание на этот класс: P). Вот демонстрация того, что, я думаю, вы пытаетесь сделать примерно? jsfiddle.net/R3nWN
2. Вроде того. По какой-то причине в этом jsfiddle SearchResultsContainer всего 2 результата. Попробуйте увеличить его на 5 результатов, но заполните его 2 результатами. лол, ты говоришь как я @ school: p
3. Вот как выглядит моя проблема: jsfiddle.net/guyfromfl/xwgzx если вы удалите часть текста x в html, он будет выглядеть нормально, но как только вы перейдете к потоку, нижняя граница исчезнет.
4. Я понимаю, о чем вы говорите… вам случайно не нужен div с максимальной высотой, как в этой демонстрации? jsfiddle.net/6bbQT
5. Спасибо, Джозеф, вот и все! Я знал, что мне не нужно было входить в JS, чтобы сделать это… Большое спасибо за вашу помощь.
Ответ №1:
В основном желаемая функциональность заключается в том, чтобы граница расширялась вместе с содержимым до определенной точки, а затем делала содержимое прокручиваемым. Это может быть достигнуто с max-height помощью атрибута.
max-height:150px;