Гибкая главная целевая страница

Question

Я хотел создать html-страницу, где я хочу полноэкранное изображение в первом разделе.

<header> 
<div class="menu"> </div> 
<div class="logo"></div> <div class="sub-menu"></div> 

<div class="main-banner"></div> 
<div class="bottom-menu-bar"></div> 
</header> 

Здесь я хочу main-banner быть гибкими в зависимости от размера экрана. Это изображение должно автоматически адаптироваться к экранам. bottom-menu-bar должен быть всегда в нижней части заставки (первый раздел просмотра загруженной веб-страницы), но идти вверх, когда мы прокручиваем вниз вместе с основным баннером.

Как я могу это достичь? (Хорошим примером является веб-сайт PayPal, хотя я проверял элементы, но их трудно понять. Любой быстрый и простой способ?)

Спасибо за помощь. Если нужна какая-либо информация, просто дайте мне знать. Я нашел похожие вопросы и на других сайтах, но не на ясный ответ.

Answer 1

Чтобы получить снизу меню-бар, чтобы остаться в нижней части страницы, добавьте CSS:

.bottom-menu-bar{ 
    position: fixed; 
    bottom: 0; 
} 

Чтобы получить главный баннер быть изменяемыми использование width:100%; вместо явного ширина как 600px.