Codarz360 Codarz360 - 3 years ago 201
HTML Question

How do I set the padding's of containers relative to the height of the browser window

I have a mobile menu laid out in a grid based format. The menu consists of 6 items. Here is a screenshot:

enter image description here

When I drag the window up I would like the padding to change so that all 6 items are still shown within the contents of the window.

Here is how the HTML is structured:

<div class="top-menu">
<li class="mobile test">
<a href="/" title="test">test</a>
<li class="test">
<a href="/test.html" title="test">test</a>
<li class="test">
<a href="/test.html" title="test">test</a>
<li class="test">
<a href="/test.html" title="test">test</a>
<li class="test active">
<a href="/test.html" title="test">test</a>
<li class="last test">
<a href="test.html" title="test">test</a>

And here is the SASS:

.top-menu {
position: absolute;
width: 100%;
z-index: 9999;
top: 71px;
left: 0px;
background: rgb(41, 50, 53);
ul {
li {
width: 50%;
cursor: pointer;
margin: 0;
box-sizing: border-box;
padding: 22% 0;
border-bottom: 1px solid #515c64;
border-right: 1px solid #515c64;
text-align: center;
&:nth-child(even) {
border-right: none;
a {
line-height: initial;
height: auto;

Also a link to the demo -

Any help / advice is appreciated.

Answer Source

I've edited your Fiddle to what I think does what you want it to do. All that needed to be done, was:

  1. Getting rid of the padding
  2. Adding a height of 100% to html, body and .container
  3. Making .top-menu stretch to 71px from the top and 0 from the bottom
  4. Giving all the 'li' elements a height of 33.3%

And you're done :)

Hope this helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download