Как правильно написать свойства wrapper-а?

226
17 июля 2018, 22:50

Вопрос исключительно мучает меня 3 дня и только для профессионалов CSS этот вопрос очень важный для понимания как работает верстка так как до этого времени я думал что знал принцип верстки.

Мне надо было написать фон который не меняет свой размер

ТО ЕСТЬ

Начиная с 4К мониторах заканчивая самых маленьких смартфонах.Конечно же у меня не получилось из за недостатка опыта.Мне дали одну верстку одного программиста. В котором была то что мне надо вот тот код который там был внизу можете запустить.

До этого момента я думал что такое сделать невозможно.Но я очень гулобоко ошибалсья.Запустите код ниже и увеличьте или уменшите экран на любую ширину даже без разницы хоть +300% или -25% картинка будет пропорционально менять размер.

Может и кто то это знал но я впервые сталкнулсья с таким.

И когда я вставил этот код в мой шаблон он не сработал хедер сжималсья

И я выяснил что проблема в обертке который я дал всем тегам на своем странице

wrapper с одним свойством у меня было min-height: calc(100vh - 70px); чтобы выровнить футер правильно если кто спросит.

Ну вот теперь все работает.

ГЛАВНЫЙ ВОПРОС:

КАК МНЕ ОБЕРНУТЬ ЭТОТ БЛОК header В ОБЕРТКУ ЧТОБЫ FOOTER РАБОТАЛ И КАРТИНКА ТАКЖЕ УВЕЛИЧИВАЛОСЬ И УМЕНШАЛОСЬ БЕЗУПРЕЧНО

body, 
html { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    font-family: 'Bebas NeueAzeri' 
} 
 
 
 
header { 
    background: url(https://images3.alphacoders.com/823/thumb-1920-82317.jpg) center center no-repeat; 
    background-size: 100%; 
    width: 100%; 
    height: 100% 
}
<header> 
         
</header>

Answer 1

Попробуйте другой способо выровнять footer, через flex. И на моё скромное мнение, если вставляете изображение фоном, то не стоит использовать его в header.

А если хотите использовать ваш вариант, то задайте wrapper высоту в любых единицах кроме %, так как внутрений блок не может применить к себе высоту 100%, поскольку у родителя задана только минимальная.

body, 
html { 
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0; 
  font-family: 'Bebas NeueAzeri' 
} 
 
.x-page { 
  display: flex; 
  min-height: 100vh; 
  flex-direction: column; 
  background: url(https://images3.alphacoders.com/823/thumb-1920-82317.jpg) center center no-repeat; 
  background-size: 100%; 
  width: 100%; 
  height: 100% 
} 
 
main { 
  flex: 1; 
} 
header, 
main, 
footer { 
  font-size: 3rem; 
  font-weight: bold; 
  color: white; 
}
<div class="x-page"> 
  <header> 
    HEADER 
  </header> 
  <main> 
    MAIN 
  </main> 
  <footer> 
    FOOTER 
  </footer> 
</div>

READ ALSO
Как сделать навигацию такого типа?
CSS

Как сделать навигацию такого типа?

Есть обычная навигация

 283
Не могу понять как передаются аргументы
javascript

Не могу понять как передаются аргументы

Изучаю javascriptЕсть код

 182
Как вызвать success callback
javascript

Как вызвать success callback

Я пишу метод save обьекта user который должен иметь в себе ивенты success и error (это ивенты?)

 173
глобальная переменная
javascript

глобальная переменная

создаю глобальную переменную dev и локальную, внутри функции, почему ругается на "не определение" глобальной переменной? ведь если создам глобальную...

 202