CSS 容器最小高度 100%答案

【问题标题】：CSS container min-height 100%CSS 容器最小高度 100%
【发布时间】：2015-10-03 22:26:37
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

只需使用100vh 将高度设置为视口高度的 100%，然后减去页脚 (130px) 和页眉 (130px) 的高度 = 260px。

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

为了防止它变得太小，您可以根据自己的喜好添加min-height 属性。

Demo

【讨论】：

因为它有效地设置了position: fixed;，这在此页面上很好，但在其他内容丰富的页面上，页脚卡在浏览器底部而不是页面。此外，这无助于填充容器空间，只会在容器末端和页脚开始之间创建空白。
页脚现在总是在底部。如果有很多内容，它会放在页面底部。如果内容很少，它仍然会触底。并且没有重叠。这不是你想要的吗？
不，这不是我提出的问题？您已经管理了两种修复页脚的方法，但是如果内容不适合浏览器窗口，问题会要求容器达到 100% 高度...
听起来您需要页脚方面的帮助。但是好的，你可以使用 javascript 来解决这个问题吗？
没问题！给你 - 自动中心中间 :) jsfiddle.net/yy174bpo/1

【解决方案2】：

试试这个：

html, body {
  height: 100%;
}

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

【讨论】：

几乎做到了，在页面上放了一个长滚动条，大约 500 像素。谢谢

【解决方案3】：

应用下面的 CSS。

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

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

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

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

【讨论】：

与此处的另一个答案相同的问题，它可以工作，但在页面上增加了大约 500px v 滚动
我已经更改了代码。测试一下，您可能正在寻找那种解决方案！不过，您的问题令人困惑。