Reputation: 1173

CSS container min-height 100%

I have been trying to get my container to fill 100% height as some pages have limited information on them.

I have tried setting footer positions, content min heights etc...

Best I've managed is setting content to absolute and it then goes more than 100% and hides the footer. I tried a auto margin minus the height of footer but no luck.

<!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;
}

Upvotes: 2

Answers (3)

Xahed Kamal

Reputation: 2223

Apply the below CSS.

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

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

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

I guess this is what you are trying to get. Depending on your needs, you'll have to change the height of Header, Content and Footer.

Upvotes: 0

Chris

Reputation: 59511

You can calculate the height dynamically with the calc propery.

Simply set the height to be 100% the height of the viewport with 100vh and then subtract the height of the footer (130px) and header (130px) = 260px.

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

To then prevent it from going too small, you can add a min-height property of your liking.

Demo

Upvotes: 2

André

Reputation: 156

Try this:

html, body {
  height: 100%;
}

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

Upvotes: 1

CSS container min-height 100%

Answers (3)

Related Questions