Joey Tajzai
Joey Tajzai

Reputation: 13

Why is my footer hiding content when I scroll down?

I'm trying to figure out why my footer is blocking my content. It wasn't doing this earlier so I don't know what the problem is. I tried making the height: 100% or min-height: 100vh but it still didn't work. So I put the entire code so you can see it better hopefully this helps more. If you need more of the HTML let me know but this is all of the code, obviously there's more HTML pages but I focused on just putting the footer.

HTML

 <footer>
 <p>Jawed A. Tajzai
    <br>
     <a href="mailto:[email protected]" title="email">[email protected]</a>
</p>    
</footer> 

    CSS 
    
    body {
    margin-bottom: 100px;
    clear: both;
    margin: 0;
    background-color: #c8d8e4;
    padding-bottom: 2%;
}

nav {
    overflow: hidden;
    navbar-static:top;
    background-color: #39395F;
    position: fixed;
    height: 75px;
    width: 100%;
    top: 0;
    z-index: 100;
    
}

nav ul {
    list-style-type: none;
}

nav ul li {
    float: right;
}

nav a:link {
    display: block;
    width: 6em;
    color: yellow;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-decoration: none;
    text-align: center;
    margin-top: 5px;
    padding: 0.5em 0.5em;
    position: relative;
    top: 0;
}

nav a:visited
{
  color: white;
}

a:hover 
{
    color:#FFFFFF;
}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  width: 0%;
  background-color: white;
  position: absolute;
  bottom: 0;
  transition: all ease-in-out 100ms;
  margin-left: 20px;
}

nav ul a:hover::before {
  width: 50%;
}

/* Nav - End */

/* Index - Start */

#headshot {
    clear: right;
    display: block;
    margin: 0 auto;
    margin-top: 7%;
    margin-bottom: 2%;
}

#aboutme {
    height: 100%;
    width: 75%;
    margin: 0 auto;
    margin-bottom: 10%;
    font-size: 1.2em;
    border: 5px double #39395F;
    padding: 1em 1em;
}

/* Index - End */

/* Footer - Start */

footer {
    text-align: center;
    background-color: #39395F;
    position: fixed;
    overflow: hidden;
    width: 100%;
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    }

footer p{
    color: white;
    font-size: 1.3em;
}

footer a{
    color: white;
}

footer a:hover {
    color: lightblue;
}

/* Footer - End */

/* Project - Start */

#column1proj {
    float: left;
    width: 25%;
    margin-bottom: 2%;
    margin-top: 15%;
    margin-left: 10%;
    padding: 1em;
    position: fixed;
    height: 100%;
}

#projtitle {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2%;
    font-size: 2em;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

h1 {
    text-align: center;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.projectimgs{
    display: block;
    margin: 0 auto;
}

.projecttxt {
    margin-top: 5%;
    text-align: center;
    font-size: 1.2em;
}

div dd a {
    text-decoration: none;
    color: black;
    font-size: 1.2em;
}

div dd a:hover {
    color: grey;
}

#column2proj {
    float: right;
    width: 50%;
    height: 100%;
    border: 10px solid white;
    padding: 0 2%;
    margin: 3% 5% 2% 0;
}

/* Project - End */

/* Hobbies - Start */

div h1::before {
  content: '';
  display: block;
  height: 75px;
  margin-top: -75px;
  visibility: hidden;
}

#column1hob {
    float: left;
    width: 25%;
    margin-top: 18%;
    margin-left: 10%;
    padding: 1em;
    position: fixed;
}

#column2hob {
    float: right;
    width: 50%;
    height: 100%;
    border: 10px solid white;
    padding: 0 2%;
    margin: 8% 5% 2% 0;
}


#hobtitle {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2%;
    font-size: 2em;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.hobimgs {
    display: block;
    margin: 0 auto;
}

.hobtxt {
    margin-top: 5%;
    text-align: center;
    font-size: 1.2em;
}

div dd {
    margin-left: -1%;
}

/* Hobbies - End */

/* Resume - Start */

#bodyres {
    margin-left: 2%;
}

#title {
    margin-top: 8%;
}

#title p {
    text-align: center;
}

#resumeme {
    text-align: center;
    font-weight: 600;
}

hr {
    width: 80%;
    margin-top: 15px;
    border: none;
    height: 3px;
    background-color: #333;
 }

div ul{
    list-style-type: none;
}
    
.job, .school {
    font-weight: bold;
}

.title, .achievements {
    font-style: italic;
}

h3, .title, .achievements {
    text-decoration: underline;
}

#main {
    font-size: 18px;
}

/* Resume - End */

/* My Goals - Start */


#column1goals {
    float: left;
    width: 50%;
    height: 100%;
    border: 10px double white;
    padding: 0 2%;
    margin: 0 5% 5% 5%;
}

table {
    margin-top: 10%;
    margin-left: 5%;
    width: 30%;
}

#headergoal {
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

#goaldets {
    font-size: 1.1em;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

th {
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

td {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
/* My Goals - Endbody {
    margin-bottom: 100px;
    clear: both;
    margin: 0;
    background-color: #c8d8e4;
    padding-bottom: 2%;
}

nav {
    overflow: hidden;
    navbar-static:top;
    background-color: #39395F;
    position: fixed;
    height: 75px;
    width: 100%;
    top: 0;
    z-index: 100;
    
}

nav ul {
    list-style-type: none;
}

nav ul li {
    float: right;
}

nav a:link {
    display: block;
    width: 6em;
    color: yellow;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-decoration: none;
    text-align: center;
    margin-top: 5px;
    padding: 0.5em 0.5em;
    position: relative;
    top: 0;
}

nav a:visited
{
  color: white;
}

a:hover 
{
    color:#FFFFFF;
}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  width: 0%;
  background-color: white;
  position: absolute;
  bottom: 0;
  transition: all ease-in-out 100ms;
  margin-left: 20px;
}

nav ul a:hover::before {
  width: 50%;
}

/* Nav - End */

/* Index - Start */

#headshot {
    clear: right;
    display: block;
    margin: 0 auto;
    margin-top: 7%;
    margin-bottom: 2%;
}

#aboutme {
    height: 100%;
    width: 75%;
    margin: 0 auto;
    margin-bottom: 10%;
    font-size: 1.2em;
    border: 5px double #39395F;
    padding: 1em 1em;
}

/* Index - End */

/* Footer - Start */

footer {
    text-align: center;
    background-color: #39395F;
    position: fixed;
    overflow: hidden;
    width: 100%;
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    }

footer p{
    color: white;
    font-size: 1.3em;
}

footer a{
    color: white;
}

footer a:hover {
    color: lightblue;
}

/* Footer - End */

/* Project - Start */

#column1proj {
    float: left;
    width: 25%;
    margin-bottom: 2%;
    margin-top: 15%;
    margin-left: 10%;
    padding: 1em;
    position: fixed;
    height: 100%;
}

#projtitle {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2%;
    font-size: 2em;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

h1 {
    text-align: center;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.projectimgs{
    display: block;
    margin: 0 auto;
}

.projecttxt {
    margin-top: 5%;
    text-align: center;
    font-size: 1.2em;
}

div dd a {
    text-decoration: none;
    color: black;
    font-size: 1.2em;
}

div dd a:hover {
    color: grey;
}

#column2proj {
    float: right;
    width: 50%;
    height: 100%;
    border: 10px solid white;
    padding: 0 2%;
    margin: 3% 5% 2% 0;
}

/* Project - End */

/* Hobbies - Start */

div h1::before {
  content: '';
  display: block;
  height: 75px;
  margin-top: -75px;
  visibility: hidden;
}

#column1hob {
    float: left;
    width: 25%;
    margin-top: 18%;
    margin-left: 10%;
    padding: 1em;
    position: fixed;
}

#column2hob {
    float: right;
    width: 50%;
    height: 100%;
    border: 10px solid white;
    padding: 0 2%;
    margin: 8% 5% 2% 0;
}


#hobtitle {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2%;
    font-size: 2em;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.hobimgs {
    display: block;
    margin: 0 auto;
}

.hobtxt {
    margin-top: 5%;
    text-align: center;
    font-size: 1.2em;
}

div dd {
    margin-left: -1%;
}

/* Hobbies - End */

/* Resume - Start */

#bodyres {
    margin-left: 2%;
}

#title {
    margin-top: 8%;
}

#title p {
    text-align: center;
}

#resumeme {
    text-align: center;
    font-weight: 600;
}

hr {
    width: 80%;
    margin-top: 15px;
    border: none;
    height: 3px;
    background-color: #333;
 }

div ul{
    list-style-type: none;
}
    
.job, .school {
    font-weight: bold;
}

.title, .achievements {
    font-style: italic;
}

h3, .title, .achievements {
    text-decoration: underline;
}

#main {
    font-size: 18px;
}

/* Resume - End */

/* My Goals - Start */


#column1goals {
    float: left;
    width: 50%;
    height: 100%;
    border: 10px double white;
    padding: 0 2%;
    margin: 0 5% 5% 5%;
}

table {
    margin-top: 10%;
    margin-left: 5%;
    width: 30%;
}

#headergoal {
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

#goaldets {
    font-size: 1.1em;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

th {
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

td {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
/* My Goals - End

Upvotes: 0

Views: 1014

Answers (3)

Vishal Gohel
Vishal Gohel

Reputation: 11

You need to write like this footer p a{ color: white;} footer p a:hover{ color: lightblue;} and also need to check whether the color is overridden or not and check your output using inspect .

Upvotes: 0

Crystal
Crystal

Reputation: 1992

footer {
      position: sticky;
      bottom:0;
      left:0;
      right:0
      }

Upvotes: 0

Manjiri Bangali
Manjiri Bangali

Reputation: 31

Add this to #aboutme overflow-y: auto;

Upvotes: 1

Related Questions