Div is bigger than Section

Asked

Viewed 437 times

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>

html css twitter-bootstrap bootstrap-4 responsive

2 answers

1


I recreated your page with the bootstrap, I hope I can help you. I suggest you look a little more about the classes of flexbox, will better organize your code.

html,body{
    height: 100% !important;
}
.container-fluid{
    padding: 0 !important;
    height: calc(100% - 122px) !important;
}
.divisor{
    height: 15px;
    background: yellow;
}

.second{
    background: url('https://imgnooz.com/sites/default/files/wallpaper/travel/66746/new-york-under-bridge-wallpapers-66746-2947804.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    text-align: center;
}
.central{
    background: yellow;
    width: 20%;
    min-width: 200px;
    padding: 2rem;
    display: block;
}
.btn{
    display: block;
    margin: 0 auto !important;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container-fluid firstContainer">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <div class="divisor">

        </div>
        <div class="container-fluid second">
            <div class="central">
                <div class="textos">
                    <h2>Bom</h2>
                    <h2>Bom</h2>
                    <h2>Bom</h2>
                </div>
                <div class="botoes">
                    <button class="btn btn-warn">
                        Inscrever-se
                    </button>
                    <button class="btn btn-warn">
                        Entrar
                    </button>
                </div>
            </div>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

0

Exchange the height: calc(100% - 122px) for min-height: 100%. That’s because when using the calc, when the height of the viewport (window area) is less than the document height, the calc will cash 122px, making the div smaller than the height of the viewport. With the min-height, div height will always follow window height.

*{
	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("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	/*height: calc(100% - 122px);*/
   min-height: 100%;
	/* 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

Browser other questions tagged html css twitter-bootstrap bootstrap-4 responsive

You are not signed in. Login or sign up in order to post.