flexbox height or large image background

Мне действительно очень нравится этот подход, который является большим img-фоном, но я хочу, чтобы он был жидким с высотой окна (до того, как мы прокрутим вниз до другого раздела или div), поэтому до достижения мобильного экрана , его высота всегда можно растянуть и заполнить экран браузера весь в то время как логотип & содержание внутри всегда в серединеflexbox height or large image background

Мне нравится этот сайт, http://peterfinlan.com/, я по электронной почте, чтобы узнать, но не получил никакого ответа о том, как это сделать, я стараюсь чтобы следить за его css, но я просто не мог сделать свой заголовок как свой, я действительно не вижу никакого другого flexbox css, кроме div.hero-content, и да, я новичок в flexbox, у него есть javascript или что?

Вы можете мне помочь?

источник

2015-05-30 user2163348

Не могли бы вы более конкретно указать желаемое поведение и предоставить разметку и образцы CSS в отношении того, что вы пробовали до сих пор. – Cu3PO42

Чтобы сделать ДИВ заполнить сайт с помощью гибкого окна, вам нужно сделать следующее:

<body> 
    <div id="mainWrapper"> 
     <div id="headerWrapper"> 
     <!-- HEADER CONTENT HERE --> 
     </div> 
    </div> 
</body>

со следующими CSS

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#mainWrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
} 

#headerWrapper { 
    flex: 1; 
}

Смотрите пример в действии here.

В этом конкретном контексте, однако, вам необязательно нужен flexbox, поскольку #mainWrapper уже распространяется на весь сайт.
В то время как flexbox хорош, не заставляйте его использовать только потому, что он новый. Избавиться от flexbox и #headerWrapper не навредил бы здесь.

Обратите внимание, что здесь не указаны префиксы поставщиков, поэтому он может не работать во всех браузерах, как есть. Перед развертыванием CSS рекомендуется использовать инструмент, например autoprefixer.

источник

2015-05-30 15:07:35 Cu3PO42

благодарите Бога за то, что привели вас сюда! я сделал это! вот почему я не смог сделать это на весь экран (мой заголовок или первый div на странице), я никогда не думал о том, что мне нужно установить html и ширину и высоту тела – user2163348

flexbox height or large image background

ответ

Смежные вопросы