2 адаптивных блока, растягиваются друг за другом по высоте, но есть проблема с контентом, как решить?

Question

[Антон Вебсайтовский]

Всем привет, думал как сформировать вопрос правильно ))
Есть два блока, для красоты сделал чтобы один растягивался за другим по высоте.
Ибо контент внутри бывает разной длины, ну и не красиво что один блок длиннее другого.

По началу я сделал так:


Но так не красиво, и я решил прижать кнопку в левом блоке к низу.
И вышло вот так.


Появилась проблема, если в правом блоке сделать контент меньше, то слева кнопка становиться выше и наезжает на контент, как это исправить, маргин или паддинг не срабатывает.

Вот рабочий пример:https://jsfiddle.net/7q8o35c0/3/

Что выходит если в левом блоке контента меньше, то слева видно что кнопка наезжает на текст.


Как можно решить проблемку? подскажите.

Comments

[Ankhena]

Ну вы и понаписали классов и оберток.

Если абсолюты, то padding-bottom родителю (ненадежный вариант, если высота кнопки увеличится, то паддинг об этом не узнает).
Либо флекс с flex-direction: column и либо space-between, если дочерних элемента только 2. Либо margin-top:auto для кнопки, если флекс элементов больше, чем 2.

[Антон Вебсайтовский]

Ankhena, напишешь лучше не применяя что-то выше флекса ? )), чтобы адаптация была и все дела )

[Антон Вебсайтовский]

Ankhena, без

.fb, .fbr{
  width: 100%;
  position: relative;
}

там косяк идет, не растягивается контент во всю длину блока, то есть не замещает блок, по этому пришлось так сделать.

можно было из этого

<div class="ff65">
   <div class="fb">

сделать так
<div class="ff65 fb">
но так не срабатывает.

[Антон Вебсайтовский]

Вот что выходит, если убрать fb, а position: relative;
добавить сюда

.ff, .ff65, .ff35{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

чтобы кнопки не вылезали за блоки.

https://jsfiddle.net/0Lam765n/

[Rustam Bainazarov]

Антон Вебсайтовский, она вам говорит про структурно-модульный подход к классам.

Касательно темы вопроса она уже сказала, как сделать. Собственно, реализация первого варианта — у меня в ответе.

[Антон Вебсайтовский]

Рустам Байназаров, а это понятно, мы тут об другом ) не совсем понял про структуру классов.

[Rustam Bainazarov]

Антон Вебсайтовский, надеюсь, так будет понятнее:

[Ankhena]

Антон Вебсайтовский,
флексы https://jsfiddle.net/gsdb8rL0/
абсолюты https://jsfiddle.net/euvxz8fs/

Но хочу повторить: решение с абсолютами не является надежным.

[Антон Вебсайтовский]

Рустам Байназаров, а все понял, вы про то как я все подписал ), сокращенно )
ну кто как пишет )
в вашем коде дивов больше и кода ) так что не скажу что это хорошо )

[Rustam Bainazarov]

Антон Вебсайтовский, кода больше? Посмотрите внимательнее на количество CSS в моём варианте. Сократите наименования классов, если нужно. Это BEM, когда-нибудь, вы поймете его преимущества.

[Антон Вебсайтовский]

Ankhena, ага неплохо. по короче код вышел )
Не полностью еще на флекс перешел ), по этому салянка и выходит.

[Антон Вебсайтовский]

Ankhena, есть и минусы, в ваших методах, кнопка на всю длину, но она не учитывает отступы контейнера, у меня там 30 стоят вообще, но при адаптации они 20 и потом 20, в медиа прописываю, а теперь надо и кнопку прописывать, чтобы она тож в медиая была из-за этого width: calc(100% - 20px);

[Ankhena]

Антон Вебсайтовский, ну это абсолюты, чего от них хотите. Пишите через препроцессорные переменные, будет проще.

Но я за флекс

[Антон Вебсайтовский]

Ankhena, Щас попробую, главное чтобы проблем новых не появилось )), а то уже столько вылезло )

[Антон Вебсайтовский]

Ankhena, за флекс это для блоков, а что для кнопок тож можно было что-то применить? а почему не сделали на своем примере.

а то я щас ставлю ваши примеру, тестирую.

[Антон Вебсайтовский]

Вот по этому не все просто и к тому что я сделал почему я пришел, я пытался так чтобы нюансов не было, и вот с кнопкой он остался ). щас с вашими примерами пробую и тож есть всякие нюансы ) но думаю что-то подберу, если что кнопку буду добавлять в медиа и все. Но не хотелосьбы.

[Ankhena]

Антон Вебсайтовский, не поняла вопроса

[Антон Вебсайтовский]

Ankhena, Один из твоих методов https://jsfiddle.net/gsdb8rL0/
применил на деле, вот что вышло https://jsfiddle.net/q0gvszf6/1/

Не пашет ))))

Второй тож применил и тож беда с кнопками, вообщем ничего не изменилось ) все таже проблема с кнопками )
Ладно че, часа 3 только потерял тут со спецами ))))), если что оставлю как есть и все. чеж уж тут поделать.

[Антон Вебсайтовский]

Ankhena, это был не вопрос.

[Ankhena]

Антон Вебсайтовский,

https://jsfiddle.net/zqrLxdkf/
зачем .ff65 я не поняла

[Антон Вебсайтовский]

Ankhena, блоки не одинаковые ff65 - это 65%, а второй ff35 - это 35% ширина блоков.
вообще поидеи для левой кнопки надо было, но вы сделали для обоих я вот и пытался для обоих применить, пусть две будут.

[Антон Вебсайтовский]

Ankhena, так-то работает, но тож
убирает, надо применять паддинг или маргин.

[Ankhena]

Антон Вебсайтовский, ну хорошо, тогда зачем fb )))
Вы просто перемудрили с разметкой и наделали лишних оберток.

[Антон Вебсайтовский]

Ankhena, так если можно убрать, то можно ! раньше он нужен был, если щас нет то можно убрать.
Так то что в fb, можно перенести сюда .ff65, .ff35 я правильно понял и фб убрать.

[Антон Вебсайтовский]

Не сломалось чет, попробовал перенести ) и фб убрать.

[Ankhena]

Антон Вебсайтовский, да

[Ankhena]

Антон Вебсайтовский, аккуратно

[Ankhena]

Антон Вебсайтовский,
так меньше блоков
https://jsfiddle.net/chbfduop/

И вы аккуратнее с 35% и 65% и еще margin-left 70px. Это капельку больше 100%, а значит флексбокс кого-то сожмет.

[Антон Вебсайтовский]

Ankhena, не совсем понял по поводу 35% и 65%, и маргин лефт 70, почему нельзя такой отступ делать, я через медиа потом меньше делаю его.
и вообще при определенном размере экрана, через медиа, становиться один блок в линию и под него фторой и там уже не 35% и 65%, а каждый по 100%.

[Антон Вебсайтовский]

И зачем

.b0 {
  margin-top: auto;
}

если там в кнопках можно вписать

.regs {
  width: 100%;
  margin-top: auto;
  padding: 15px 0 15px 0;
  text-align: center;
  background: #DD0746;
  color: #fff;
  font-size: 16px;
  border: 0;
}

.ka {
  width: 100%;
  margin-top: auto;
  padding: 15px 0 15px 0;
  text-align: center;
  background: #eb7c2c;
  color: #fff;
  font-size: 16px;
  border: 0;
}

и зачем
.form-field

если можно так сделать

.fb input, .fbr input{
margin-bottom: 20px;
}

[Антон Вебсайтовский]

Хочу заметить, что последний вариант он не адаптивный вообще ) https://jsfiddle.net/chbfduop/
Конечно большое спасибо за помощь, но вы делаете и не проверяете. Почему? хотя пытаетесь давать кучу советов.

[Ankhena]

Антон Вебсайтовский, Антон
1.
35% и 65% это уже 100%, т. е. полная ширина родителя. А вы между ними еще 70px пытаетесь воткнуть. Значит, ширина блоков не будет 35 и 65.

2. Затем, что это подобные элементы. Кнопкам (не важно button или a) вообще разумно задавать по 2 класса: общий универсальный и модификаторы.

3. Селекторы по тегам медленнее селекторов по классам, а чем меньше вложенность, тем легче поддержка.
Но лишь бы не br.
И почитайте статейки о том, каким элементам и в каких ситуациях задавать margin и с какой стороны, каким padding.

4. Про адаптивность. В вашем коде не было ни одного media, а в вопросе ни одного упоминания о том, как именно оно должно перестраиваться.

Собственно, суть вопроса сводится к вопросу о том, как прибить кнопку к низу блока. Ответ: flex-direction column и margin-top:auto для кнопки.
Кроме этого и Рустам и я написали вам пример реализации.
Перенос этого в ваш код, его адаптация и т.д. это ваши заботы.

[Антон Вебсайтовский]

35% и 65% это уже 100%, т. е. полная ширина родителя. А вы между ними еще 70px пытаетесь воткнуть. Значит, ширина блоков не будет 35 и 65.

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

4. Про адаптивность. В вашем коде не было ни одного media, а в вопросе ни одного упоминания о том, как именно оно должно перестраиваться.

я не стал медиа пихать, мой пример и так был адаптивный он растягивался и сжимался.

Собственно, суть вопроса сводится к вопросу о том, как прибить кнопку к низу блока. Ответ: flex-direction column и margin-top:auto для кнопки.
Кроме этого и Рустам и я написали вам пример реализации.
Перенос этого в ваш код, его адаптация и т.д. это ваши заботы.

Я показал вам выше примеры вашего кода, и что выходит. так что спасибо, но решить проблему не удалось.

[Ankhena]

Антон Вебсайтовский, Антон, вы поставили для .w ширину 800px, что там после этого должно сжиматься??

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

Да нет проблемы.
Просто 65% от 800 это 520, а 35% это 280.
А у вас в результате получаются блоки ~456 и ~274. Больше ничего.

Answer 1

[Rustam Bainazarov]

Изучайте flex.

Например, так:


Или так:

Comments

[Антон Вебсайтовский]

спасибо большое, флекс, да не самая новая функция, но полезная и уже можно внедрять.

[Rustam Bainazarov]

Антон Вебсайтовский, уже можно и нужно внедрять как несколько лет.

[Rustam Bainazarov]

Антон Вебсайтовский, да, кстати, разметка и классы просто беда, над этим тоже стоит поработать.

[Антон Вебсайтовский]

Рустам Байназаров, и что не так? я выше в коментах пояснил что к чему, почему пришлось добавить.

.fb, .fbr{
  width: 100%;
  position: relative;
}

контент внутри не растягивался в весь блок.
вот и добавил.

выходит типа того что-то. кнопка только левая растянулась, там поситион абсолут

[Антон Вебсайтовский]

Рустам Байназаров, а так можно вот так сделать, меньше код, но там проблемы с контентом, ну в примере видно или выше на скрине, пример https://jsfiddle.net/0Lam765n/1/

[Антон Вебсайтовский]

Я конечно извиняюсь, не думал что если дивы добавлю в контент будет проблема, так что ваш вариант не работает, у меня там дивы в контенте и вот такая проблема https://jsfiddle.net/r6oecnxL/
Растянуло все что внутри.

[Rustam Bainazarov]

Антон Вебсайтовский, потому что надо кнопку и тексты в отдельных блоках держать. Зачем тогда вы предоставили неполный пример в вопросе?

[Rustam Bainazarov]

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

Вот:


А лучше оберните контент в отдельный блок, чтобы отделить кнопку от него. Тогда и отступ можно будет сделать от кнопки для контента нормальный, чтобы она не была к нему вплотную.

[Антон Вебсайтовский]

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

вот вариант где все ок https://jsfiddle.net/1e03cfys/

[Rustam Bainazarov]

Антон Вебсайтовский, непонятный transform у кнопок, который там вообще не нужен + absolute.

Понятное дело там всё нормально, потому что снизу отступ на высоту кнопки, которая на absolute. А что если кнопка в каком-то блоке будет выше, чем нужно из-за текста? Не универсальный вариант.

Я вам прислал выше пример.

[Антон Вебсайтовский]

Рустам Байназаров, в последнем методе, есть косяк, он куда-то
сжирает, я поставил на примере https://jsfiddle.net/q0gvszf6/ между дивами в которых импут.
Второй вариант тож сжирает.
Ах хотели решить такую мелкую проблему ) и по итогу намудрили еще больше )

[Rustam Bainazarov]

Антон Вебсайтовский, кого и что сжирает? У меня всё так, как оно и ожидается от этого:



Намудрили вы с такой безумной разметкой изначально, не я.

[Антон Вебсайтовский]

Рустам Байназаров, да причем тут разметка, код очень короткий, видно же по примеру что и как, все же просто, по вашему методу, идет сжимание блока который длиннее чем другой и по этому и бр сжимает и вообще убирает.

[Rustam Bainazarov]

Антон Вебсайтовский, внутри flex-контейнера у br не будет его стандартной высоты (которая равна высоте строки), поэтому он схлопывается... изучайте flex.

Ну и никто с помощью br отступы не делает уже.

[Антон Вебсайтовский]

Рустам Байназаров, да там не только в этом дело, слева есть где более короткий блок, а справа он более длинный но его сжало под левый.

[Rustam Bainazarov]

Антон Вебсайтовский, я ничего не понял. Нарисуйте.

[Rustam Bainazarov]

Антон Вебсайтовский, вот если я сделал изначально нормальную структуру, то у меня и не разваливается ничего, всё адаптивно и работает (сжимайте окно):



Что хотите получить вы — я не понимаю.

[Антон Вебсайтовский]

Рустам Байназаров, хороший пример, но почему не сработал на моем примере? https://jsfiddle.net/e5vfno7t/2/
у вас el блок 50%, то есть все блоки 50% в моем случае, блоки разной ширины.