Html CSS容器最小高度100%_Html_Css

Html CSS容器最小高度100%

html css

Html CSS容器最小高度100%,html,css,Html,Css,我一直试图让我的容器填满100%的高度，因为有些页面上的信息有限我试过设置页脚位置、内容最小高度等我最好的办法是将内容设置为绝对值，然后超过100%并隐藏页脚。我尝试了自动边距减去页脚高度，但没有成功 <!DOCTYPE html> <html lang="en"> <head> <title>Client Check</title> <meta charset="utf-8"> <link

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


客户支票
检查客户
客户信息
姓氏：
门牌号/名称：
邮政编码：
|
&抄袭；2015年客户检查。版权所有
#内容{
宽度：100%；
最小高度：100%；
}
#关于{
宽度：100%；
背景色：#FFFFFF；
}
#大约h2{
字号：2em；
填充顶部：25px；
文本对齐：居中；
颜色：#F48C6B；
}
#关于p{
字体大小：1.3em；
文本对齐：居中；
颜色：#878786；
}
#大约跨度{
字体大小：粗体；
颜色：#F48C6B；
}
#关于按钮{
保证金：0自动；
边缘底部：30px；
显示：块；
颜色：#FFFFFF；
背景色：#57BB89；
边界：无；
大纲：无；
填充：15px；
边界半径：8px；
箱形阴影：4px 4px#4AA478；
}
#关于按钮：悬停{
颜色：#F48C6B；
}
#怎么{
宽度：100%；
背景色：#F7F7F7；
文本对齐：居中；
}
#如何h2{
字号：2em；
填充顶部：25px；
文本对齐：居中；
颜色：#F48C6B；
}
#支票客户机{
宽度：280px；
高度：120px；
显示：内联块；
右边距：50px；
背景色：#FFFFFF；
边界半径：8px；
盒影：6px 6px#B5B2B2；
}
#报表客户端{
宽度：280px；
高度：120px；
边缘底部：35px；
显示：内联块；
背景色：#FFFFFF；
边界半径：8px；
盒影：6px 6px#B5B2B2；
}
#如何按钮{
宽度：200px；
高度：35px；
保证金：0自动；
颜色：#FFFFFF；
背景色：#57BB89；
边界：无；
大纲：无；
}
#how按钮：悬停{
颜色：#F48C6B；
}
#多大p{
颜色：#858889；
字体大小：粗体；
字体大小：1.3em；
}
#如何使用按钮img{
最大宽度：20px；
最大高度：20px
}
#搜寻{
宽度：100%；
身高：100%；
背景色：#EFEDE7；
文本对齐：居中；
}
#搜索h2{
保证金：0；
填充顶部：25px；
字号：2em；
文本对齐：居中；
颜色：#F48C6B；
}
#搜索表{
宽度：450px；
高度：350px；
显示：内联块；
边缘顶部：20px；
边缘底部：35px；
背景色：#FFFFFF；
盒影：6px 6px#B5B2B2；
}
#查册表格h3{
颜色：#57BB89；
填充：10px0；
}
#搜索表单标签{
宽度：200px；
颜色：#C9C8C8；
左边距：20px；
填充底部：50px；
字号：1em；
字体大小：粗体；
显示：内联块；
文本对齐：左对齐；
}
#搜索表单输入[类型=文本]{
宽度：170px；
高度：30px；
浮动：对；
右边距：20px；
背景色：#C9C8C8；
颜色：#FFFFFF；
边界：无；
大纲：无；
字体大小：粗体；
左侧填充：10px；
右边填充：10px；
}
#搜索表单输入[类型=提交]{
宽度：200px；
高度：35px；
背景色：#57BB89；
颜色：#FFFFFF；
边界：无；
大纲：无；
}
#页脚{
宽度：100%；
高度：130像素；
背景色：#5C5D5D；
}
#页脚img{
最大宽度：180像素；
最大高度：40px；
显示：块；
保证金：0自动；
填充顶部：15px；
}
#页脚p{
颜色：#FFFFFF；
文本对齐：居中；
字号：0.8em；
}
#页脚a：链接{
文字装饰：无；
颜色：#F48C6B；
}
#页脚a：已访问{
颜色：#F48C6B；
}
#页脚a：悬停{
颜色：#00BB89；
}

您可以使用

计算属性动态计算高度
只需使用100vh
将高度设置为视口高度的100%，然后减去页脚（130px）和页眉（130px）=260px的高度
为了防止它变得太小，您可以添加自己喜欢的minheight
属性
试试这个：
html, body {
  height: 100%;
}

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

应用下面的CSS
#header{
    height: 15vh;
    overflow: auto;
}

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

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

我想这就是你想要得到的。根据您的需要，您必须更改页眉、内容和页脚的高度。
因为它有效地设置了位置：固定，这在这个页面上很好，但在其他有大量内容的页面上，页脚卡在浏览器底部，而不是页面。此外，这也无助于填充容器空间，只会在容器结尾和页脚开始之间创建空白。页脚现在总是在底部。如果有很多内容，它会放在页面底部。如果没有多少内容，它仍然是底部。没有重叠。那不是你想要的吗？不，那不是我在问题中提出的？您已经掌握了两种修复页脚的方法，但问题是，如果内容不适合浏览器窗口，则容器的高度应为100%……听起来您需要有关页脚的帮助。但是好吧，你同意用javascript来解决这个问题吗？没问题！在这里，你去-自动中心中间：）这非常接近做到这一点，把一个长卷轴在页面上，约500像素。谢谢我的问题作为这里的另一个答案，它可以工作，但在页面上增加了大约500px v的滚动。我已经更改了代码。测试一下，你可能正在寻找那种解决方案！不过，你的问题令人困惑。
#header{
    height: 15vh;
    overflow: auto;
}

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

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