как растянуть компоновку по экрану, но сохранить содержимое уже?

Question

Быстрый вопрос:

Как создать макет, где все фонки элементов растягиваются по ширине экрана, но содержание остается узким, скажем, 1000 пикселей? Я ищу, чтобы придумать что-то вроде этого:

https://themeforest.net/item/itcore-site-template/3638733

Для записи, я знаю, как код, я просто не знаю, что лучший подход к этому. Я уверен, что для достижения этой цели есть «лучшая практика», и только с построением панелей на 100% ширины я никогда не работал с ней.

Любые советы?

Answer 1

Вы просто объединяете два элемента, которые будут соответствовать окну (на котором вы можете применить некоторый фон и другой стиль, который закрывает область просмотра), и другой контейнер в центре страницы. Я рекомендую вам использовать max-width, чтобы он мог сжиматься на меньших устройствах.

<div class="section"> 
    <div class="wrapper"> 
    Some content 
    </div> 
</section> 

Тогда ваш CSS так же просто, как

.section { 
    background: (...) 
    background-size: cover; /* stretch to cover the whole container */ 
} 

.wrapper { 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 2

Посмотрите на CSS Background size property. Вы можете указать фиксированное значение в единицах, например:

background-size: 100vw; 

, который будет занимать ширину экрана.

Answer 3

Спасибо, LeBen, вот что я искал. Я закончил создание класса-обертки, который можно использовать для всех элементов и стилизован с использованием отдельных классов. Внутри идет контент, такой как header, main, footer и т. Д., И они масштабируются с помощью медиа-запросов в соответствии с разрешением экрана.

<div class="wrapper bgLight"> 
    <header> 
     Header content goes here 
    </header> 
</div> 

Еще раз спасибо!