Блок выходит за родительский элемент

rustamXx · February 6, 2021

Возникала такая проблема блок banner выходит за пределы родителя header(он должен занимать весь экран) Подскажите как сделать так чтобы картинка в блоке banner занимала оставшуюся часть экрана и не вылазила за пределы

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="asecs/css/style.css">
<title>Five Stars Room</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<header>
<div class="container">
<div class="top-bar">
<h1>Logo</h1>
</div>
</div>
<div class="banner">
</div>
</header>

</body>
</html>

body{
margin: 0;
font-family: Pt Sans;

font-size: 15px;
line-height: 1.6;
color: #333;
}

html{
box-sizing: border-box;
}
*,
*:before,
*:after{
box-sizing: inherit;
}

h1, h2, h3, h4, h5 ,h6{
margin: 0;
}

/* header */
header{
height: 100vh;
}
.container{
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.top-bar{
height: 75px;
background-color: #2c3e50;
}

.banner{
width: 100%;
height: 100%;
background: url(../imgs/1.jpg) top no-repeat;
-webkid-background-size: cover;
background-size: cover;
}

Igor Schnaider · February 6, 2021

Если высота .tob-bar фиксированная, то можете просто использовать calc, например:

.banner {
  height: calc(100% - 75px);
}

Если плавающая, то тут куча разных способов. Посмотрите holy grail layout.

rustamXx · February 6, 2021

5 часов назад, Igor Schnaider сказал:
Если высота .tob-bar фиксированная, то можете просто использовать calc, например:
.banner {
  height: calc(100% - 75px);
}
Если плавающая, то тут куча разных способов. Посмотрите holy grail layout.

Большое спасибо помогло

Sign In

Блок выходит за родительский элемент

Recommended Posts

rustamXx

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

rustamXx

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information