Footer background color won't go full height

Hello, I am trying to set a background color for the Footer but when I do its not taking the full height of the footer content because I don’t want to use Height for Footer to make it responsive. Can you please help me fix this issue please take a look at the screenshot below and the code.

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git-Hub Cheatsheet</title>
    <link rel="stylesheet" href="../CSS/style.css" type="text/css">
    <style>
        
    </style>
</head>

<body>
<!-- Header Section-->
    <header>
        <div class="header-1">
            <div class="header-col1">
                <h1 class="h1">GitHub</h1>
                <h1 class="h2">GIT CHEAT SHEET</h1>
            </div>
        </div>
        <div class="header-2">
            <img src="../Images/Github-PNG-images--50png.png" 
                 class="logo" alt="Git Logo">
        </div>
        
        <!-- Divider -->
        <div class="header-3">
            <p class="header3-p">
               Git is the free and open source distributed version control 
               system that's responsible for everything GitHub related that 
               happens locally on your computer. This cheat sheet features 
               the most important and commonly used Git commands for easy
               reference. With platform specific installers for Git, 
               GitHub also provides the ease of staying 
               up-to-date with the latest releases
               of the command line tool while providing a 
               graphical user interface for day-to-day 
               interaction, review, and repository
               synchronization</p>
        </div>
    </header>
<!-- Main Section -->
    <main class="container">
        <div class="content">
            <div class="info-left">
                <h3 class="param-head">INSTALLATIONS & GUIS</h3>
                    <p class="param">With platform specific installers for Git, 
                    GitHub also provides the ease of staying 
                    up-to-date with the latest releases
                    of the command line tool while providing a 
                    graphical user interface for day-to-day 
                    interaction, review, and repository
                    synchronization.</p>
                    <p class="param-h">GitHub for Windows</p>
                    <p class="param"><a href="https://windows.github.com">https://windows.github.com</a></p>
                    <p class="param-h">GitHub for Mac</p>
                    <p class="param"><a href="https://mac.github.com">https://mac.github.com</a></p>
                    <p class="param">For Linux and Solaris platforms, the latest release is available on the official Git web site.</p>
                    <p class="param-h">Git for All Platforms</p>
                    <p class="param"><a href="http://git-scm.com">http://git-scm.com</a></p>
            </div>
<!-- Divider -->
            <div class="info-left">
                <div>
                    <p class="param-head">SETUP</p>
                    <p class="param">Configuring user information used across all local repositories</p>
                </div>
                <div>
                    <p class="param-h">git config --global user.name “[firstname lastname]”</p>
                    <p class="param">set a name that is identifiable for credit when review version history</p>
                    <p class="param-h">git config --global user.email “[valid-email]”</p>
                    <p class="param">set an email address that will be associated with each history marker</p>
                    <p class="param-h">git config --global color.ui auto</p>
                    <p class="param">set automatic command line coloring for Git for easy reviewing</p>
                </div>
            </div>
            <div class="info-left">
                <div>
                    <p class="param-head">SETUP & INIT</p>
                    <p class="param">Configuring user information, initializing and cloning repositories</p>
                </div>
                <div>
                    <p class="param-h">git init</p>
                    <p class="param">initialize an existing directory as a Git repository</p>
                    <p class="param-h">git clone [url]</p>
                    <p class="param">retrieve an entire repository from a hosted location via URL</p>
                </div>
            </div>
<!-- Divider -->  
            <div class="info-left">
                <div>
                    <p class="param-head">INSPECT & COMPARE</p>
                    <p class="param">Examining logs, diffs and object information</p>
                </div>
                <div>
                    <p class="param-h">git log</p>
                    <p class="param">show the commit history for the currently active branch</p>
                    <p class="param-h">git log branchB..branchA</p>
                    <p class="param">show the commits on branchA that are not on branchB</p>
                    <p class="param-h">git log --follow [file]</p>
                    <p class="param">show the commits that changed file, even across renames</p>
                    <p class="param-h">git diff branchB...branchA</p>
                    <p class="param">show the diff of what is in branchA that is not in branchB</p>
                    <p class="param-h">git show [SHA]</p>
                    <p class="param">show any object in Git in human-readable format</p>
                </div>            
            </div>
<!-- Divider -->  
            <div class="info-left">
                <div>
                    <p class="param-head">TRACKING PATH CHANGES</p>
                    <p class="param">Versioning file removes and path changes</p>
                </div>
                <div>
                    <p class="param-h">git rm [file]</p>
                    <p class="param">delete the file from project and stage the removal for commit</p>
                    <p class="param-h">git mv [existing-path] [new-path]</p>
                    <p class="param">change an existing file path and stage the move</p>
                    <p class="param-h">git log --stat -M</p>
                    
                </div>
            </div>
<!-- Divider -->  
            <div class="info-right">
                <div>
                    <h3 class="param-head">STAGE & SNAPSHOT</h3>
                    <p class="param">Working with snapshots and the Git staging area</p>
                </div>
                <div>
                    <p class="param">show modified files in working directory, staged for your next commit</p>
                    <p class="param-h">git add [file]</p>
                    <p class="param">add a file as it looks now to your next commit (stage)</p>
                    <p class="param-h">git reset [file]</p>
                    <p class="param">unstage a file while retaining the changes in working directory</p>
                    <p class="param-h">git diff</p>
                    <p class="param">diff of what is changed but not staged</p>
                    <p class="param-h">git diff --staged</p>
                    <p class="param">diff of what is staged but not yet committed</p>
                    <p class="param-h">git commit -m “[descriptive message]”</p>
                    <p class="param">commit your staged content as a new commit snapshot</p>
                    <p >git status</p>
                </div>
            </div>
<!-- Divider -->  
            <div class="info-right">
                <div>
                    <h3 class="param head">BRANCH & MERGE</h3>
                    <p class="param">Isolating work in branches, 
                   changing context, and integrating changes</p>
                </div>
                <div>
                    <p class="param-h">git branch</p>
                    <p class="param">list your branches. a * will appear next to the currently active branch</p>
                    <p class="param-h">git branch [branch-name]</p>
                    <p class="param">create a new branch at the current commit</p>
                    <p class="param-h">git checkout</p>
                    <p class="param">switch to another branch and check it out into your working directory</p>
                    <p class="param-h">git merge [branch]</p>
                    <p class="param">merge the specified branch`s history into the current one</p>
                    <p class="param-h">git log</p>
                    <p class="param">show all commits in the current branch`s history</p>
                </div>
            </div>
<!-- Divider -->  
            <div class="info-right">
                <div>
                    <h3 class="param-head">SHARE & UPDATE</h3>
                    <p class="param">Retrieving updates from another repository and updating local repos</p>
                </div>
                <div>
                    <p class="param-h">git remote add [alias] [url]</p>
                    <p class="param">add a git URL as an alias</p>
                    <p class="param-h">git fetch [alias]</p>
                    <p class="param">fetch down all the branches from that Git remote</p>
                    <p class="param-h">git merge [alias]/[branch]</p>
                    <p class="param">merge a remote branch into your current branch to bring it up to date</p>
                    <p class="param-h">git push [alias] [branch]</p>
                    <p class="param">Transmit local branch commits to the remote repository branch</p>
                    <p class="param-h">git pull</p>
                    <p class="param">fetch and merge any commits from the tracking remote branch</p>
                </div>
            </div>
<!-- Divider -->  
            <div class="info-right">
                <div>
                    <h3 class="param-head">REWRITE HISTORY</h3>
                    <p class="param">Rewriting branches, updating commits and clearing history</p>
                </div>
                <div>
                    <p class="param-h">git rebase [branch]</p>
                    <p class="param">apply any commits of current branch ahead of specified one</p>
                    <p class="param-h">git reset --hard [commit]</p>
                    <p class="param">clear staging area, rewrite working tree from specified commit</p>
                </div>
            </div>
<!-- Divider -->  
            <div class="info-right">
                <div>
                    <h3 class="param-head">STAGE & SNAPSHOT</h3>
                    <p class="param">Preventing unintentional staging or commiting of files</p>
                </div>
                <div>
                    
                    <p class="param-h">logs/ <br>*.notes <br>pattern*/ <br></p>
                    <p class="param">Save a file with desired patterns as .gitignore with either direct string matches or wildcard globs.</p>
                    <p class="param-h">git config --global core.excludesfile [file]</p>
                    <p class="param">system wide ignore pattern for all local repositories</p>
                </div>
            </div>
<!-- Divider -->  
            <div class="info-right">
                <div>
                    <h3 class="param-head">TEMPORARY COMMITS</h3>
                    <p class="param">Temporarily store modified, tracked files in order to change branches</p>
                </div>
                <div>
                    <p class="param-h">git stash</p>
                    <p class="param">Save modified and staged changes</p>
                    <p class="param-h">git stash list</p>
                    <p class="param">list stack-order of stashed file changes</p>
                    <p class="param-h">git stash pop</p>
                    <p class="param">write working from top of stash stack</p>
                    <p class="param-h">git stash drop</p>
                    <p class="param">discard the changes from top of stash stack</p>
                </div>
            </div>
        </div>
    </main> 
<!-- Divider -->     
    <footer>
        <div class="footer-col1">
            <h2 class="foo1"><span>GitHub</span> Education</h2>
            <p class="foo2">Teach and learn better, together. GitHub is free for students and teachers. Discounts available for other education uses.</p>
        </div>
        <div class="footer-col2">
            <p class="foo3">
            <a href="mailto:education@github.com" class="footer-p1 ftrp">education@github.com</a>
            </p>
            <p class="foo4">
            <a href="education.github.com" class="footer-p2 ftrp">education.github.com</a>
            </p>
        </div>
    </footer>
</body>
</html>

CSS CODE

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
html {
    height: 100%;
    width: 100%;
    border: 1px solid red;
}
body {
    min-height: 100%;
    background-color: red;
}
header {
    margin: 0;
}
.container {
    background-color: yellow;
}
.content {
    padding: 20px;
}
h1 {
    color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 50px;
    margin-right: 20px;
}
img {
    margin: 0;
}
img.logo {
    position: absolute;
    height: 100px;
    right: 35px;
    top: 25px;
    float: right;
}
.h1 {
    font-size: 28px;
    margin: 0;
    padding-left: 50px;
    padding-top: 35px;
}
.h2 {
    font-weight: 200;
    margin: 0;
    padding-left: 50px;
    padding-top: 10px;
}
.header-1 {
    background-image:url(../Images/milky-way.jpg);
    background-size: cover; 
}
.header-3 {
    margin-top: 0;
}
.header3-p {
    background-color: rgba(10, 70, 50, 0.2);
    margin: 0;
    padding: 20px 50px;
}
.header-col1 {
    width: 50%;
    padding-bottom: 10px;
}
.info-left {
    margin: 20px;
    width: 45%;
    left: 0;
    background-color: olive;
    display: inline-block;
    position: relative;
}
.info-right {
    margin: 20px;
    width: 45%;
    right: 0;
    background-color: olive;
    display: inline-block;
    position: relative;
}
.param-head, .param-h {
    font-weight: bold;
}
.param-h, .param-head, .param {
    padding: 5px 0;
}
.footer-col1 {
    width: 50%;
    float: left;
}
.footer-col2 {
    width: 50%;
    float: right;
}
.foo1, .foo2 {
    padding-bottom: 10px;
}
.foo3, .foo4 {
    text-align: right;
    padding-bottom: 10px;
}
.foo3 {
    padding-top: 5px;
}
span {
    font-weight: bolder;
}
@media screen and (max-width: 900px) {
    .info-left, .info-right {
        width: 90%;
    }
}
@media screen and (max-width: 375px) {
    .header-col1 {
        padding-bottom: 10px;
    }
    .foo2 {
        width: 300px;
    }
}
footer {
    background-color: aquamarine;
    bottom: 0;
    padding: 20px;
}
![Screen Shot 2022-03-23 at 8.57.17 PM|509x500](upload://QNCpuZ4JNr9gEqaaz6hd6gTZf2.png)

Hi,
you are using float: left; and float: right; for the divs nested in the footer element. Floats need to be cleared, otherwise the float applies for the subsequent elements as well. That usually means that they are collapsing.

You can have a generic clearfix class that you can reuse for all elements you’re floating. Add the following code to your css:

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
} 

.clearfix::after {
  clear: both;
}

Then apply the class on the elements you want to clear:

<footer class="clearfix">
2 Likes

Thank you so much God Bless you.

1 Like