Здравствуйте. подскажите пожалуйста решение на такие вопросы. сделал верстку. на моем компьютере все отображается корректно. причем проверил на 3 компьютерах с разным экраном и на одном ноутбуке. а когда отправил верстку заказчику, он говорит что у него один крайний правый блок в main-e падает вниз а должен быть в один ряд с другими?
и второй вопрос при добавлении верстки на гитхаб и открытии страницы с гитхаба, появляются не известные отступы слева и снизу.
Мне всегда нравится решать такие задачи путем переформулирования вопроса на "а почему они не должны появляться?". Т.е. где те правила, которые говорят элементам вести себя так, как вам хочется?
Ну вот смотрите, у вас есть row.
В нем три дочерних элемента:
92px
320px
75%
Никита Сальников, это зависит от вашего ТЗ.
Если первые два должны быть фиксированными, то растягивать последний. (через grow, calc или 1fr в гридах, как вам больше нравится)
Если все три должны менять свою ширину в зависимости от вьюпорта, то так и расписывайте.
Ankhena, заказчик хочет именно отзывчивый сайт (responsive). Но сказал посмотреть вариант на сайте с которого я делаю этот макет. и проблема в том что это веб приложение и мобильного варианта там попросту нет. все ломается и косится.
Но основная возникшая проблема это то что он говорит что у него блок съехал вниз. хотя я до отправки сделал медиа запросы где прописал что при уменьшении экрана меняется размер правой части макета, чтобы он не съезжал. вот и интересно сейчас у Вас например съезжает блок вниз или нет. потому что у меня на всех компьютерах ничего не сломалось
Отступ снизу - не настроена высота html, body 100% и дочерних элементов, поэтому высота соответствует контенту, а не растягивается по высоте экрана.
Отступ справа - у вас максимально возможная суммарная ширина всех колонок 1702px (жестко прописано в коде) поэтому остается пустое пространство на экранах шире этого размера. Запутались с комбинацией max-width и width в третьей колонке
main-e, то есть тег main. что значит не настроена высота? ее ведь не задают. и она автоматически устанавливается по количеству элементов. При верстке и запуске страницы через VS Code этого отступа снизу нет. на гитхабе появляется. при этом все делается на одном компьютере. в одном браузере.
По поводу ширины я так понял надо процентах задавать?
ее ведь не задают. и она автоматически устанавливается по количеству элементов.
По высоте контента, если быть точнее, что как раз у вас и происходит. Если хотите растянуть на высоту экрана то надо задавать. Кто сказал что ее не задают? Зависит от ситуации.
По поводу ширины я так понял надо процентах задавать?
У вас для третьей колонки стоят бессмысленные значения в своей комбинации
width: 75%;
max-width: 1290px;
Непонятно, что вы хотели этим добиться. Если делать логически правильно то растягиваете ширину на 100% и задаете ограничение максимальной шириной. Но это конечно не решение, а лирическое отступление для понимания.
В контексте Flex Box свойства ширины являются вспомогательными элементами. Необходимо использовать свойство flex. Удалите максимальную ширину и ширину и используйте этоflex: 1 1 auto;
Pavel-ww, чтобы растянуть на высоту экрана значит мне надо прописать высоты как 100vh? ведь в противном случае при добавлении элементов появится или скролл или элементы вылезят за пределы?
Никита Сальников, у вас итак сейчас есть скролл (вертикальный). Где-то, что-то мешает. Избавьтесь сначала от него.
Потом:
html, body {
height: 100%;
}
.main {
height: calc(100% - 57px); /*для компенсации высоты меню*/
}
/*Добавьте к row свой класс чтобы не переопределять бутстраповский селектор*/
.row.your-class {
height: 100%;
}
И возможно еще какой то min-height для main или row надо добавить.
Бутстрап вообще-то здесь избыточен. Можно было сделать все на флексах или гридах.
Ну и в любом случае, если вы будете добавлять элементы по высоте, то скролл появится. Экран то не безразмерный.
Просто интересно, как вы это всё сверстали если основ не знаете?
Pavel-ww, вот это всё ужасно про height: calc(100% - 57px) в современном мире при наличии флексов и гридов.
Ну ладно, раньше нам было тяжело, но теперь-то зачем?
Тем более, что нет никакой гарантии, что меню всегда будет 57px.
Pavel-ww, судя по разнице между тем что есть и тем, что хочет видеть заказчик, да, нужно довольно много переписывать.
А раз так, то разумно делать это актуальными методами.
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.main {
flex: 1;
}
/*Добавьте к row свой класс чтобы не переопределять бутстраповский селектор*/
.row.your-class {
height: 100%;
}
