Question

我一直试图让我的容器填满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>&copy; 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;
}

Answer 1

您可以使用calc属性动态计算高度。

只需将高度设置为视口高度的100％100vh，然后减去页脚高度（130px）和标题（130px）= 260px。

#content{
   width: 100%;
   height: calc(100vh - 260px);
   min-height: 500px;
}

要防止它变得太小，您可以添加自己喜欢的min-height属性。

Demo

Answer 2

试试这个：

html, body {
  height: 100%;
}

#content {
  width: 100%;
  height: 100%;
}

Answer 3

应用以下CSS。

#header{
    height: 15vh;
    overflow: auto;
}

#content{
    height: 70vh;
    overflow: auto;
}

#footer{
    height: 15vh;
    overflow: auto;
}

我想这就是你想要的。根据您的需要，您必须更改标题，内容和页脚的高度。

CSS容器最小高度100％

3 个答案: