1
I have a div called 'banner' that’s inside a Section I call 'bg'. When I lower the screen in terms of height, the banner exceeds the size of bg.
*{
font-family: 'Open Sans', sans-serif;
}
html{width:100%;
height:100%;
}
body{
background-color: #d9d9d9;
width:100%;
height:100%;
/* border: 9px solid red; */
}
.material-icons{
position:relative;
top: 20px;
left: 2px;
font-weight:900;
font-size: 50px;
}
.fonte{
font-family: 'Lobster', cursive;
font-weight: bolder;
font-size: 36px;}
.navegacao-bar{
background-color:white;
}
.nav-link:hover{
background-color: #fdec00;
}
.marca{
padding-left: 30px;
}
.divisor{
height: 15px;
background-color: rgb(245, 248, 70);
}
.bg{
background-image: url("imagem/cidade.jpg");
background-repeat: no-repeat;
background-size:cover;
height: calc(100% - 122px);
/* border: 4px solid rgb(255, 72, 0); */
}
.slogan p{
font-family: 'Lobster', cursive;
font-size: 50px;
color:rgb(230, 248, 70);
}
.button-home{
position: relative;
width: 15%;
top: 14%;
left: 42%;
}
.button-home button{
width:250px;
height:60px;
background-color:rgb(236, 248, 70);
margin-bottom: 5px;
color: rgb(31, 30, 30);
font-size: 24px;
border-color: rgb(248, 236, 70);
}
.banner{
position: relative;
margin:auto;
background: rgba(20, 20, 20, 0.555);
padding-top:10px;
padding-bottom:80px;
padding-left:100px;
padding-right:100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Barra de Navegação Bootstrap</title>
<!-- Bootstrap CDN -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Fontes -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- CSS-->
<link rel="stylesheet" type="text/css" href="achei.css">
</head>
<body>
<div class="navegacao-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<div class="marca">
<p class="fonte navbar-brand">Ach<i class="material-icons">search</i>u</p>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#barra-navegacao" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<ul id="barra-navegacao" class="nav justify-content-end collapse navbar-collapse">
<li class="nav-link" href="#">Dashboard</li>
<li class="nav-link">Registros</li>
<li class="nav-link">Mapa</li>
<div class="dropdown">
<li class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbar-menu" aria-haspopup="true"
aria-expanded="false" href="#">Minha Area</li>
<div class="dropdown-menu" aria-labelledby="navbar-menu">
<li class="dropdown-item" href="#">Editar</li>
<li class="dropdown-item" href="#">Sair</li>
</div>
</div>
</ul>
</div> <!--container-->
</nav>
</div>
<div class="divisor"></div>
<section class="container-fluid bg d-flex flex-column">
<div class="banner">
<div class="slogan d-flex flex-column align-items-center">
<p>Olá</p>
<p>Blá</p>
<p>Blá</p>
</div>
<div class="button-home d-flex flex-column align-items-center">
<button type="button" class="btn btn-outline-dark btn-lg "aria-pressed="true">Inscrever-se</button>
<button type="button" class="btn btn-outline-dark btn-lg "aria-pressed="true">Entrar</button>
</div>
</div>
</section>
<!-- JS Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I get it. VLW worked now
– user133918