Как опустить кнопку вниз блока?

Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100px. У меня не получается это сделать, пробовал через position:absolute; не получается. Делать через margin-top не хочу тк. с изменением размера экрана кнопка будет сьезжать. Помогите пожалуйста.

header < background: url(../img/background-image.png) no-repeat; background-size: 100% 100%; height: 100vh; >.header < padding-top:50px; >.logo < font-size: 25px; font-weight: 800; color: #fff; font-family: 'BIG JOHN'; letter-spacing: 0.13em; >.logo:hover < cursor: pointer; >.menu a < margin-left: 7px; font-size: 16px; color:#fff; font-family: 'Open Sans'; padding: 7px 9px; border: 2px solid transparent; transition: 0.3s; >.menu a:hover < border: 2px solid #fff; border-radius: 100px; color:#fff; text-decoration: none; transition: 1s ease; >.title h1 < margin-top:35%; color:#fff; font-weight: 300; >.title p < padding-top: 30px; color:#fff; >.scroll < >.scroll img < display: block; transition: 0.5s ease; >.scroll img:hover

 
 
 
 
BOUNCY
 
Hello About Services Portfolio Team Blog Contact 
 
 
 
 
We Are Code Cafe
 
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 
 
 
 
 
 
 
 
 
 

Выпадающее по клику меню на css

Приветствую! Скажите, как сделать выпадающее по клику меню, желательно на css, с такой особенностью: меню убирается не только по нажатию на ссылку, но и на любое место пространства вне этого меню. Пример: такие меню часто встречаются на Яндексе и Гугле.

Отслеживать
задан 11 ноя 2011 в 11:41
180 2 2 золотых знака 6 6 серебряных знаков 21 21 бронзовый знак

Если не морочить себе голову то можно обойтись исключительно css. Но учитывая показатель данных GA(гугль аналитикс) 12-15% посетителей сайта все еще юзают злостный IE6. Если у сайта нет коммерческого интереса то ответ ниже. Если же сайт занимается привлечением клиентов, да еще и вкладываются финансы на рекламу и раскрутку то о ишаке забывать нельзя. Обработчик js должен присутствовать однозначно.

11 ноя 2011 в 13:16

Все верно насчет IE6, сайт коммерческий, да еще к тому же провинциальный, где по всей видимости и живут эти самые 12-15% (хотя не обязательно). Поэтому буду рад узнать решение для IE6 даже с использованием скриптов.

11 ноя 2011 в 17:34
Посоветую Jquery, реализация будет в ответе.
11 ноя 2011 в 17:44

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Выпадающее меню по клику

Отслеживать
ответ дан 11 окт 2016 в 21:43
183 1 1 серебряный знак 10 10 бронзовых знаков

Bomblerm спрашивает: TomasRedl, а можно к меню добавить какую-либо анимацию, например, выход, как в ВКонтакте, когда нажимаешь на своё имя и аватарку?

28 янв 2017 в 10:55
да можно, но это на JS лучше делать или генератором css
1 апр 2017 в 11:46

я однажды реализовывал подобное меню. там смысл достаточно прост: делаем обычное навигационное меню. раз меню выпадающее — делаем первый и второй уровень (допустим). первый уровень отображается всегда, а вот второй скрываем с помощью display: none; . при наведении на определённый пункт меню первого уровня через псевдокласс :hover отображаем ссылки второго уровня. тут правильно задать позиционирование для второго уровня. а также очень важно (это проблема заставила меня долго мучаться) задать для пункта, при наведении на который будет появляться подменю, padding по-больше. чтобы площадь реагирования на наведение увеличить. Для большей наглядности мой код HTML (упрощённый):

И код CSS (тоже упрощён):

#main_nav < position: relative; top: 15px; margin-top: 14px; margin-left: 280px; >#main_nav li < display: inline; padding: 0 8px; border-left: 1px dotted #8b6619; position: relative; z-index: 2; >#main_nav li:first-child, #main_nav ul li < border-left: none; >#main_nav ul < display: none; position: absolute; top: 19px; left: 0; z-index: 1; width: 155px; >#main_nav li a, #main_nav li ul li a < color: #8b6619; font-family: "Times New Roman", serif; font-size: 0.9em; font-weight: bold; text-decoration: none; outline: none; padding-bottom: 17px; >#main_nav li a:hover, #main_nav li ul a:hover < color: black; >/*--------------Подменю--------------*/ #main_nav li:hover ul

Вот и всё. Спасибо за голоса!)

Как прижать кнопки вниз?

Проблемная страница: mextra.segmenti.lv
Не могу разобраться.
Как эти кнопки прижать к низу блока?

Плохо знаком с CSS, в нём у меня не густо:

.woocommerce ul.products li.product < height: 500px; >.woocommerce ul.products li.product .button < /* Как? */ >

• Вопрос задан более трёх лет назад
• 356 просмотров

Комментировать
Решения вопроса 1

Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель

Флекс → колонка карточке продукта.
Кнопке margin-top: auto. Во флексах это работает как индивидуальное «отталкивание»
элемента.

ЗЫ: делать из списка карточки это выстрел себе в ноги.

Ответ написан более трёх лет назад
Нравится 1 7 комментариев

mipfikus @mipfikus Автор вопроса
Можно с примером? Я же хлебушек

Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS

mipfikus @mipfikus Автор вопроса

Спасибо, это прогресс. Кнопки на одной высоте но выглядит это так:

.woocommerce ul.products li.product < height: 500px; display: flex; justify-content: space-between; >.woocommerce ul.products li.product .button

Как теперь дать товару нормальный вид (кнопку под товар)?

Как спозиционировать кнопку?

Что пробовал
Вариант1 — не особо подходит, тк кнопка должна занимать две колонки по макету
Кнопка спозиционирована относительно header

Вариант 2 — кнопка внутри контейнера—row—col-2
Кнопка размещаться сразу под header-top, несмотря на то что у header задана высота в 900 px
(из за того что кнопка обернута в container позиционирование происходит не отношению к header а по отношению к container)

Подобная ситуация и с соц кнопками, они спозиционированы относительно своего родителя (wrap) который также absolute его стили

&-wrap position: absolute padding-top: 800px right: 0 top: 0 &-social position: absolute right: 0 bottom: 0 justify-content: flex-end

Кнопку спозиционировать таким же способом как и кнопки соц сетей?

 
+38(095)668-55-55
Архитектура
Cпособ сделать жизнь лучше
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
КНОПКА

Кнопка имеет стиль описанный в варианте 2

/*HEADER*/ .header position: relative z-index: 5 height: 980px border: 5px solid red .button position: absolute bottom: 0 left: 0

Хочу кнопку опустить вниз как лучше сделать

• Вопрос задан более трёх лет назад
• 1675 просмотров

4 комментария

Простой 4 комментария