Why isn't the container div taking full height?
0
Here's my code. Can someone please help me understand why isn't my container div taking it's full height ?
I can only "fix" the problem by giving a fixed height, but I want it to take full height no matter how much content there is in it. It seems that something collapse, it won't expand and my footer keeps coming up.
Sorry if it is not clear and thank you for your answers.
/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1"><a href="#">Home</a></li>
<li class="nav-item2"><a href="#titleteam">Our Team</a></li>
<li class="nav-item3"><a href="#">Match Schedule</a></li>
<li class="nav-item4"><a href="#">Gallery</a></li>
<li class="nav-item5"><a href="#">Contact</a></li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>html css height
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
asked Nov 22 '18 at 13:19
SteakSteak
1
add a comment |
0
Here's my code. Can someone please help me understand why isn't my container div taking it's full height ?
I can only "fix" the problem by giving a fixed height, but I want it to take full height no matter how much content there is in it. It seems that something collapse, it won't expand and my footer keeps coming up.
Sorry if it is not clear and thank you for your answers.
/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1"><a href="#">Home</a></li>
<li class="nav-item2"><a href="#titleteam">Our Team</a></li>
<li class="nav-item3"><a href="#">Match Schedule</a></li>
<li class="nav-item4"><a href="#">Gallery</a></li>
<li class="nav-item5"><a href="#">Contact</a></li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>html css height
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
asked Nov 22 '18 at 13:19
SteakSteak
1
In the example you've given the.containerelement does take up 100% of the viewport's height
– Danny
Nov 22 '18 at 16:21
add a comment |
0
0
0
0
Here's my code. Can someone please help me understand why isn't my container div taking it's full height ?
I can only "fix" the problem by giving a fixed height, but I want it to take full height no matter how much content there is in it. It seems that something collapse, it won't expand and my footer keeps coming up.
Sorry if it is not clear and thank you for your answers.
/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1"><a href="#">Home</a></li>
<li class="nav-item2"><a href="#titleteam">Our Team</a></li>
<li class="nav-item3"><a href="#">Match Schedule</a></li>
<li class="nav-item4"><a href="#">Gallery</a></li>
<li class="nav-item5"><a href="#">Contact</a></li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>html css height
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
asked Nov 22 '18 at 13:19
SteakSteak
1
Here's my code. Can someone please help me understand why isn't my container div taking it's full height ?
I can only "fix" the problem by giving a fixed height, but I want it to take full height no matter how much content there is in it. It seems that something collapse, it won't expand and my footer keeps coming up.
Sorry if it is not clear and thank you for your answers.
/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1"><a href="#">Home</a></li>
<li class="nav-item2"><a href="#titleteam">Our Team</a></li>
<li class="nav-item3"><a href="#">Match Schedule</a></li>
<li class="nav-item4"><a href="#">Gallery</a></li>
<li class="nav-item5"><a href="#">Contact</a></li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1"><a href="#">Home</a></li>
<li class="nav-item2"><a href="#titleteam">Our Team</a></li>
<li class="nav-item3"><a href="#">Match Schedule</a></li>
<li class="nav-item4"><a href="#">Gallery</a></li>
<li class="nav-item5"><a href="#">Contact</a></li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1"><a href="#">Home</a></li>
<li class="nav-item2"><a href="#titleteam">Our Team</a></li>
<li class="nav-item3"><a href="#">Match Schedule</a></li>
<li class="nav-item4"><a href="#">Gallery</a></li>
<li class="nav-item5"><a href="#">Contact</a></li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>html css height
html css height
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
asked Nov 22 '18 at 13:19
SteakSteak
1
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
asked Nov 22 '18 at 13:19
SteakSteak
1
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
edited Nov 22 '18 at 13:29
Pete
40.9k1875116
40.9k1875116
asked Nov 22 '18 at 13:19
SteakSteak
1
asked Nov 22 '18 at 13:19
SteakSteak
1
asked Nov 22 '18 at 13:19
SteakSteak
1
1
In the example you've given the.containerelement does take up 100% of the viewport's height
– Danny
Nov 22 '18 at 16:21
add a comment |
In the example you've given the.containerelement does take up 100% of the viewport's height
– Danny
Nov 22 '18 at 16:21
In the example you've given the
.container element does take up 100% of the viewport's height– Danny
Nov 22 '18 at 16:21
In the example you've given the
.container element does take up 100% of the viewport's height– Danny
Nov 22 '18 at 16:21
add a comment |
2 Answers
2
active
oldest
votes
1
could you try this? Adding display flex and making the padding to 0 normally helps me.
.container{
width: 80%;
margin: 0 auto;
position: relative;
padding: 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
display:flex;
overflow:hidden;
}
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
add a comment |
0
I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.
answered Nov 22 '18 at 13:29
BitczeBitcze
92
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
Well, the space between the container and the footer is defined by<br><br><br><br><br><br><br>in your code. If you get rid of it, you get rid of the space.
– Bitcze
Nov 22 '18 at 13:56
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431911%2fwhy-isnt-the-container-div-taking-full-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
could you try this? Adding display flex and making the padding to 0 normally helps me.
.container{
width: 80%;
margin: 0 auto;
position: relative;
padding: 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
display:flex;
overflow:hidden;
}
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
add a comment |
1
could you try this? Adding display flex and making the padding to 0 normally helps me.
.container{
width: 80%;
margin: 0 auto;
position: relative;
padding: 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
display:flex;
overflow:hidden;
}
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
add a comment |
1
1
1
could you try this? Adding display flex and making the padding to 0 normally helps me.
.container{
width: 80%;
margin: 0 auto;
position: relative;
padding: 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
display:flex;
overflow:hidden;
}
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
could you try this? Adding display flex and making the padding to 0 normally helps me.
.container{
width: 80%;
margin: 0 auto;
position: relative;
padding: 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
display:flex;
overflow:hidden;
}
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
answered Nov 22 '18 at 13:27
Zeel MehtaZeel Mehta
193
193
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
add a comment |
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
That's what I tried first but I didn't work out. I tried to think it differently and find ways to fix it but i failed
– Steak
Nov 22 '18 at 13:40
add a comment |
0
I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.
answered Nov 22 '18 at 13:29
BitczeBitcze
92
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
Well, the space between the container and the footer is defined by<br><br><br><br><br><br><br>in your code. If you get rid of it, you get rid of the space.
– Bitcze
Nov 22 '18 at 13:56
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
add a comment |
0
I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.
answered Nov 22 '18 at 13:29
BitczeBitcze
92
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
Well, the space between the container and the footer is defined by<br><br><br><br><br><br><br>in your code. If you get rid of it, you get rid of the space.
– Bitcze
Nov 22 '18 at 13:56
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
add a comment |
0
0
0
I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.
answered Nov 22 '18 at 13:29
BitczeBitcze
92
I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.
answered Nov 22 '18 at 13:29
BitczeBitcze
92
answered Nov 22 '18 at 13:29
BitczeBitcze
92
answered Nov 22 '18 at 13:29
BitczeBitcze
92
answered Nov 22 '18 at 13:29
BitczeBitcze
92
92
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
Well, the space between the container and the footer is defined by<br><br><br><br><br><br><br>in your code. If you get rid of it, you get rid of the space.
– Bitcze
Nov 22 '18 at 13:56
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
add a comment |
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
Well, the space between the container and the footer is defined by<br><br><br><br><br><br><br>in your code. If you get rid of it, you get rid of the space.
– Bitcze
Nov 22 '18 at 13:56
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
I know it looks kind of messy and there's probably a lot of useless code. I'm just beginning to learn and I don't get all the notions yet. Thanks for helping ! In fact I'd just like my container div to take all it's height to the footer, no matter how muck content there's in it. I tried what you said, but unfortunately I didn't fix the problem. If I put too many elements in the box, it goes off everything. Plus theres a space between the container and the footer that I can't get rid off
– Steak
Nov 22 '18 at 13:37
Well, the space between the container and the footer is defined by
<br><br><br><br><br><br><br> in your code. If you get rid of it, you get rid of the space.– Bitcze
Nov 22 '18 at 13:56
Well, the space between the container and the footer is defined by
<br><br><br><br><br><br><br> in your code. If you get rid of it, you get rid of the space.– Bitcze
Nov 22 '18 at 13:56
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
Oh right... Thanks a lot !
– Steak
Nov 22 '18 at 15:17
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431911%2fwhy-isnt-the-container-div-taking-full-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
In the example you've given the
.containerelement does take up 100% of the viewport's height– Danny
Nov 22 '18 at 16:21