Codarz360 Codarz360 - 3 years ago 181
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">
<ul>
<li class="mobile test">
<a href="/" title="test">test</a>
</li>
<li class="test">
<a href="/test.html" title="test">test</a>
</li>
<li class="test">
<a href="/test.html" title="test">test</a>
</li>
<li class="test">
<a href="/test.html" title="test">test</a>
</li>
<li class="test active">
<a href="/test.html" title="test">test</a>
</li>
<li class="last test">
<a href="test.html" title="test">test</a>
</li>
</ul>
</div>


And here is the SASS:

.top-menu {
position: absolute;
width: 100%;
z-index: 9999;
top: 71px;
left: 0px;
background: rgb(41, 50, 53);
ul {
float:none;
li {
width: 50%;
cursor: pointer;
float:left;
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 - https://jsfiddle.net/4szbvseb/

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