Я имею в виду довольно простой макет, и это предполагает, что мое тело (по сути, содержимое страницы после заголовка) имеет высоту не менее 100%. Это прекрасно работает на точках останова на рабочем столе, но как только я переключаюсь на мобильную точку останова (которая устанавливает контейнер в направлении flex-direction к столбцу), я не могу сделать элемент body 100% высоты. Я пытался использовать 100vh, и это работает, но затем испортил макет рабочего стола. Каждый родитель этого элемента тела имеет высоту, превышающую его / 100%.
Я использую flexbox, styled-components и React.
Есть идеи? Спасибо!
Тело CSS:
font-family: 'FuturaBold';
box-sizing:border-box;
color: black;
height: 100%;
display: flex;
flex-direction: column;
@media (max-width: ${Breakpoints.tablet}) {
padding-top: 50px;
}
Родительский CSS:
min-height: 100% !important;
box-sizing: border-box;
background-color: ${Colours.dark};
display: flex;
@media (max-width: ${Breakpoints.tablet}) {
flex-direction: column;
}
Изображение здесь