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
CodePudding user response：
Add this to #aboutme overflow-y: auto;
CodePudding user response：
footer {
position: sticky;
bottom:0;
left:0;
right:0
}CodePudding user response：
you need to write like this footer p a{ color: white;} footer p a:hover{ color: lightblue;} and aslo need to check wheter the color is override or not and check your output using inspect