I'm facing a major issue with the website I designed; I can't seem to get the heights in percentage (%) to make everything equal. Instead, I resorted to using pixels (px) but it feels inadequate. Even after changing all the items to percentages, the divs collapse to the containing elements and don't utilize the given space properly. I have divided my page into two parts with multiple rows in each, and setting the row height only works in pixels, not percentages. Any suggestions or ideas? I will attach the relevant parts of the script here and the rest on JSFiddle.
HTML:
<div class="table-container">
<div class="table-block footer-push"><!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row header">
<div class="one columns"><input class="bbar" placeholder="search"></div>
<div class="eleven columns person"><span><a>Rajat Sharma</a><i class="fa fa-angle-down fa-fw op"></i></span> <img class="loginimg" src="logout.png"></div>
</div>
<div class="row">
<div class="twelve column">
<div class="pbox"><img alt="Paragon" class="pimg" src="paragon_sqaure.png"></div>
</div>
</div>
<div class="row">
<div class="ten columns PP"><a>Paragon Portal</a></div>
<div class="two columns PP"><input class="more-button" type="button" value="MORE..."></div>
</div>
</div>
/* Remaining HTML code */
CSS snippet related to the problem:
.table-container {
display: table;
height: 100%;
width: 100%;
}
.table-block {
display: table-row;
height: 1px;
}
.footer-push {
height: 50%;
}
#footer {
/* Placeholder footer styles */
}
.cont { height: 50%;}
/* Grid Styles */
.container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* Media queries and additional styling*/
Utilizing the Skeleton grid system with some modifications has caused this glitch. Despite trying to apply height percentages to certain elements, the desired effect isn't achieved. Can anyone provide insights on where things might be going wrong? The complete code is available on JSFiddle.
For an interactive preview, visit: Full-Screen Result