我一直在尝试让我的容器填充 100% 高度，因为某些页面的信息有限。
我尝试过设置页脚位置、内容最小高度等...
我最好的办法是将内容设置为绝对，然后它会超过 100% 并隐藏页脚。我尝试了自动边距减去页脚的高度，但没有成功。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Client Check</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
<div id="header">
<a href="../index.php"><img src="../images/logo-header.jpg" /></a>
<div id="navigation">
<a href="#" class="navtext">How it works</a>
<a href="#" class="navtext">About us</a>
<a href="#" class="navtext">Help</a>
<a href="#" class="navtext">Services</a>
<a href="#" class="navlogin">Log in</a>
</div>
</div>
<div id="content">
<div id="search">
<h2>Check a Client</h2>
<form method="post">
<h3>Client info</h3>
<label>Last Name:</label><input type="text" name="lname" />
<label>House Number/Name:</label><input type="text" name="address" />
<label>Postcode:</label><input type="text" name="post" />
<input type="submit" name="search" value="Search" />
</form>
</div>
</div>
<div id="footer">
<img src="../images/logo-header.jpg" />
<p><a href="#">Terms and Conditions</a> | <a href="#">Privacy Policy</a></p>
<p>© 2015 Client Check. All Rights Reserved.</p>
</div>
</body>
</html>
#content{
width: 100%;
min-height: 100%;
}
#about{
width: 100%;
background-color: #FFFFFF;
}
#about h2{
font-size: 2em;
padding-top: 25px;
text-align: center;
color:#F48C6B;
}
#about p{
font-size: 1.3em;
text-align: center;
color: #878786;
}
#about span{
font-weight: bold;
color: #F48C6B;
}
#about button{
margin: 0 auto;
margin-bottom: 30px;
display: block;
color: #FFFFFF;
background-color: #57BB89;
border: none;
outline: none;
padding: 15px;
border-radius: 8px;
box-shadow: 4px 4px #4AA478;
}
#about button:hover{
color: #F48C6B;
}
#how{
width: 100%;
background-color: #F7F7F7;
text-align: center;
}
#how h2{
font-size: 2em;
padding-top: 25px;
text-align: center;
color:#F48C6B;
}
#checkclient{
width: 280px;
height: 120px;
display: inline-block;
margin-right: 50px;
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 6px 6px #B5B2B2;
}
#reportclient{
width: 280px;
height: 120px;
margin-bottom: 35px;
display: inline-block;
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 6px 6px #B5B2B2;
}
#how button{
width: 200px;
height: 35px;
margin: 0 auto;
color: #FFFFFF;
background-color: #57BB89;
border: none;
outline: none;
}
#how button:hover{
color: #F48C6B;
}
#how p{
color: #858889;
font-weight: bold;
font-size: 1.3em;
}
#how button img{
max-width: 20px;
max-height: 20px
}
#search{
width: 100%;
height: 100%;
background-color: #EFEDE7;
text-align: center;
}
#search h2{
margin: 0;
padding-top: 25px;
font-size: 2em;
text-align: center;
color:#F48C6B;
}
#search form{
width: 450px;
height: 350px;
display: inline-block;
margin-top: 20px;
margin-bottom: 35px;
background-color: #FFFFFF;
box-shadow: 6px 6px #B5B2B2;
}
#search form h3{
color: #57BB89;
padding: 10px 0;
}
#search form label{
width: 200px;
color: #C9C8C8;
margin-left: 20px;
padding-bottom: 50px;
font-size: 1em;
font-weight: bold;
display: inline-block;
text-align: left;
}
#search form input[type=text]{
width: 170px;
height: 30px;
float: right;
margin-right: 20px;
background-color: #C9C8C8;
color: #FFFFFF;
border: none;
outline: none;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
}
#search form input[type=submit]{
width: 200px;
height: 35px;
background-color: #57BB89;
color: #FFFFFF;
border: none;
outline: none;
}
#footer{
width: 100%;
height: 130px;
background-color: #5C5D5D;
}
#footer img{
max-width: 180px;
max-height: 40px;
display: block;
margin: 0 auto;
padding-top: 15px;
}
#footer p{
color: #FFFFFF;
text-align: center;
font-size: 0.8em;
}
#footer a:link{
text-decoration: none;
color: #F48C6B;
}
#footer a:visited{
color: #F48C6B;
}
#footer a:hover{
color: #00BB89;
}
最佳答案
您可以使用 calc 属性动态计算高度。
只需使用 100vh 将高度设置为视口(viewport)高度的 100%，然后减去页脚 (130px) 和页眉 (130px) 的高度 = 260px。
#content{
width: 100%;
height: calc(100vh - 260px);
min-height: 500px;
}
为了防止它变得太小，您可以添加您喜欢的 min-height 属性。
关于html - CSS 容器最小高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32928144/