angel darkland angel darkland - 6 months ago 17
HTML Question

Infinite whitespace under my webpage content

For some reasons one of my webpage can be scrolled down infinitely. My html/php is kinda big so idk what should I post, I really cant find an answer online.

html {
font-size: 62.5%;
height: 100%;
}

body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
-webkit-font-smoothing: antialiased;
height:100%;
}

img {
max-width: 100%;
}

a{
text-decoration:none;
}

#content{
min-height:100%;
position:relative;
background-color:#54B0D9;
}

table{
margin-left:auto;
margin-right:auto;
border-collapse:collapse;
font-weight: 400;

}

table, td, tr, th{

border-style:solid;

border-color:#E6E7F1;

border-width:0px 1px 1px 0px;
}

td{
text-align:center;
}

a{
text-decoration:none;
color:black;
}

td.count{
min-width:50px;
}

td.count a{
padding-top:15px;
padding-bottom:15px;
display:block;
}

td.delete{
min-width:50px;
}

td.delete a{
padding-top:15px;
padding-bottom:15px;
}

td.name{
min-width:300px;
}

td.name a{
padding-top:15px;
padding-bottom:15px;
display:block;
}

td.efect{
min-width:150px;
}

td.efect a{
padding-top:15px;
padding-bottom:15px;
display:block;
}

.boldedShitForPykw{
font-weight: 700;
}

tr.even{
background-color:#F6F7FA;
}

tr.odd{
background-color:#ffffff;
}

.table-container{
padding-top:30px;
background-color:#54B0D9;
}


I have a fixed navbar at the bottom, could that be the reason?

Answer

I was able to solve this by updating your CSS from

#content {
   min-height: 100%;
   position: relative; 
   background-color: #54B0D9;
}

to:

#content {
   min-height: 100%;
   background-color: #54B0D9;
}

I was able to solve this by using Chrome's Developer Tools to amend the elements styles - this may come in handy next time!

Comments