这是我的代码。有人可以帮我了解为什么我的容器div不能全满吗?
我只能通过给出一个固定的高度来“解决”这个问题,但是无论它中有多少内容,我都希望它占据整个高度。似乎有些东西塌陷了,它不会扩大,并且我的页脚不断上升。
很抱歉,如果不清楚,谢谢您的回答。
/************* 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>
答案 0 :(得分:1)
您可以尝试这个吗?添加display flex并将padding设置为0通常对我有帮助。
.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;
}
答案 1 :(得分:0)
我不太确定您要实现什么目标,但是如果您希望.container
元素随其内容扩展,请删除该内容的位置。在您的情况下,请从position: relative;
中除去.box1
,并从height: 100vh;
中除去min-height: 100vh;
和.container
,以便它可以自己计算高度。