Почему ломается блок?

Question

[Никита Сальников]

Здравствуйте. подскажите пожалуйста решение на такие вопросы. сделал верстку. на моем компьютере все отображается корректно. причем проверил на 3 компьютерах с разным экраном и на одном ноутбуке. а когда отправил верстку заказчику, он говорит что у него один крайний правый блок в main-e падает вниз а должен быть в один ряд с другими?
и второй вопрос при добавлении верстки на гитхаб и открытии страницы с гитхаба, появляются не известные отступы слева и снизу.

вот эти отсутпы


ссылка на гитхаб
https://nikitasalnikov.github.io/DesignBold/

Comments

[Ankhena]

Мне всегда нравится решать такие задачи путем переформулирования вопроса на "а почему они не должны появляться?". Т.е. где те правила, которые говорят элементам вести себя так, как вам хочется?

Ну вот смотрите, у вас есть row.
В нем три дочерних элемента:
92px
320px
75%

При каких условиях они в сумме дадут 100%?

[Никита Сальников]

Ankhena, значит мне надо либо первым двум элементам задать ширину в процентах, либо max-width и with c соответствующим процентом?

[Ankhena]

Никита Сальников, это зависит от вашего ТЗ.
Если первые два должны быть фиксированными, то растягивать последний. (через grow, calc или 1fr в гридах, как вам больше нравится)
Если все три должны менять свою ширину в зависимости от вьюпорта, то так и расписывайте.

[Ankhena]

Никита Сальников, и это посмотрите простейшая страница на гридах для высоты.

[Никита Сальников]

Ankhena, заказчик хочет чтобы был отзывчивый сайт. получается мне вообще все в процентах прописывать

[Ankhena]

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

получается мне вообще все в процентах прописывать

Адаптив не значит, что всё в процентах. Это значит, что всегда хорошо.
Единиц измерения полно и использовать их нужно к месту.

Оба варианта о которых я говорила будут адаптивными. Но вообще их не два ;)

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

[Никита Сальников]

Ankhena, заказчик хочет именно отзывчивый сайт (responsive). Но сказал посмотреть вариант на сайте с которого я делаю этот макет. и проблема в том что это веб приложение и мобильного варианта там попросту нет. все ломается и косится.
Но основная возникшая проблема это то что он говорит что у него блок съехал вниз. хотя я до отправки сделал медиа запросы где прописал что при уменьшении экрана меняется размер правой части макета, чтобы он не съезжал. вот и интересно сейчас у Вас например съезжает блок вниз или нет. потому что у меня на всех компьютерах ничего не сломалось

[Ankhena]

Никита Сальников, так узнайте у него браузер и вьюпорт
https://www.esolutions.se/en/test и попросите скрин.

Answer 1

[Pavel-ww]

Не понял что такое main-e, не нашел это в коде.

Отступ снизу - не настроена высота html, body 100% и дочерних элементов, поэтому высота соответствует контенту, а не растягивается по высоте экрана.

Отступ справа - у вас максимально возможная суммарная ширина всех колонок 1702px (жестко прописано в коде) поэтому остается пустое пространство на экранах шире этого размера. Запутались с комбинацией max-width и width в третьей колонке

Comments

[Никита Сальников]

main-e, то есть тег main. что значит не настроена высота? ее ведь не задают. и она автоматически устанавливается по количеству элементов. При верстке и запуске страницы через VS Code этого отступа снизу нет. на гитхабе появляется. при этом все делается на одном компьютере. в одном браузере.
По поводу ширины я так понял надо процентах задавать?

[Pavel-ww]

Никита Сальников,

ее ведь не задают. и она автоматически устанавливается по количеству элементов.

По высоте контента, если быть точнее, что как раз у вас и происходит. Если хотите растянуть на высоту экрана то надо задавать. Кто сказал что ее не задают? Зависит от ситуации.

По поводу ширины я так понял надо процентах задавать?

У вас для третьей колонки стоят бессмысленные значения в своей комбинации
width: 75%;
max-width: 1290px;
Непонятно, что вы хотели этим добиться. Если делать логически правильно то растягиваете ширину на 100% и задаете ограничение максимальной шириной. Но это конечно не решение, а лирическое отступление для понимания.

В контексте Flex Box свойства ширины являются вспомогательными элементами. Необходимо использовать свойство flex. Удалите максимальную ширину и ширину и используйте этоflex: 1 1 auto;

[Никита Сальников]

Pavel-ww, чтобы растянуть на высоту экрана значит мне надо прописать высоты как 100vh? ведь в противном случае при добавлении элементов появится или скролл или элементы вылезят за пределы?

[Pavel-ww]

Никита Сальников, у вас итак сейчас есть скролл (вертикальный). Где-то, что-то мешает. Избавьтесь сначала от него.
Потом:

html, body {
	height: 100%;
}
.main {
	height: calc(100% - 57px); /*для компенсации высоты меню*/
}
/*Добавьте к row свой класс чтобы не переопределять бутстраповский селектор*/
.row.your-class {
	height: 100%;
}

И возможно еще какой то min-height для main или row надо добавить.
Бутстрап вообще-то здесь избыточен. Можно было сделать все на флексах или гридах.

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

Просто интересно, как вы это всё сверстали если основ не знаете?

[Ankhena]

Pavel-ww, вот это всё ужасно про height: calc(100% - 57px) в современном мире при наличии флексов и гридов.
Ну ладно, раньше нам было тяжело, но теперь-то зачем?
Тем более, что нет никакой гарантии, что меню всегда будет 57px.

[Pavel-ww]

Ankhena, я понимаю )). Но есть существующая вёрстка. Так то, ее всю переписать надо, что бы не костылить такое)))

[Ankhena]

Pavel-ww, судя по разнице между тем что есть и тем, что хочет видеть заказчик, да, нужно довольно много переписывать.
А раз так, то разумно делать это актуальными методами.

А то проект ещё не сдали, а он уже скопытился.

[Pavel-ww]

Ankhena, ок. Актуальными так актуальными ))

html,
body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
.main {
	flex: 1;
}
/*Добавьте к row свой класс чтобы не переопределять бутстраповский селектор*/
.row.your-class {
    height: 100%;
}