Наш дизайнер - большой затейник. Он хочет, чтобы длинный список с ограниченной высотой не скролировался, а обрезался, а под ним появлялась бы ссылка типа View All. Ссылка уже показывает полную версию списка.
Проблема в том, что заранее неизвестно, войдут ли все элементы в заданную высоту или нет. Поэтому сразу в HTML прописать ссылку не получится. Можно это сделать на JavaScript. Но, возможно, существует решение на чистом CSS?
Много способов. Самый правильный, грузить 3 элемента, а по клику ajax-ом подтягивать остальные.
Еще можно сделать фиксированную высоту и overflow:hidden; по клику или наведению менять height на auto.
Можно написать аккордион на jquery или взять готовый, подобрать.
Проблема в том, что я заранее не знаю высоту этого списка - она определяется его окружением. Поэтому войдет туда 3 или 10 элементов, заранее неизвестно. А по условиям задачи показывать View all надо только если в полном списке больше элементов, чем входит на страницу. Например на скриншоте вошло 3 элемента, а всего их 10 - показываем View all. Входит 3 и всего их 3 - не показываем.
Чорт, вы издеваетесь. Повторяю - сервер не знает высоты этого блока. И никто не знает, это вообще responsive design и высота блока может меняться при ресайзе страницы.
Так в чем проблема-то? действительно хорошее решение - подгружать ajax'ом до тех пор, пока высота списка не приблизится максимально к высоте страницы. Рассчитать количество элементов для подгрузки можно исходя из размера элемента и размера страницы, на ходу
Зачем подгружать аяксом? На JS/jQuery решение занимает одну строку, что-то вроде $('#link').toggle($('#innerDiv').height() > $('#outerDiv').height()), где список внутри #innerDiv, #innerDiv внутри #outerDiv, а у #outerDiv включен overflow:hidden. Просто если есть выбор между CSS и JS решением, я предпочитаю CSS.
softshape: "Зачем подгружать аяксом?" Что бы страница грузилась быстрее, что бы не брать лишние записи из базы. Но и без него, на JS/jQuery вполне себе норм, только Вот автор не знает js и видимо не собирается осваивать.
