Я хочу, чтобы баннер занимал всю остальную часть экрана, отзывчиво на устройствах. Оттуда прокрутка начинается с другой информации.
Я пытался использовать 100% -ую высоту и автоматическую c высоту, но мы все еще не решили. Каков наилучший способ решить эту проблему?
HTML
<body>
<div class="top-bar">
<div class="logo">Logo</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner-text">
<div class="banner-text-items">
<h2>Banner Text Heading</h2>
<p>Exercitation commodo elit magna aute ad magna laboris esse in voluptate voluptate ullamco nulla deserunt.
Esse adipisicing amet commodo ad laborum sit commodo sit sint et occaecat cillum ex occaecat. Ullamco est
labore est sit velit nulla deserunt est labore.</p>
</div>
</div>
</div>
</body>
CSS
*{margin: 0; padding: 0;}
.banner{
background-image: url('./fox.jpg');
width: 100%;
background-size: cover;
}
.top-bar{
background-color: #000;
display: flex;
width: 100%;
height: auto;
flex-wrap: wrap;
}
.logo{
color: #fff;
flex: 1;
font-size: 48px;
padding: 18px;
text-transform: uppercase;
}
.menu{
flex: 3;
}