Question

我有一个基于网格格式的移动菜单。菜单包括6个项目。这是一个截图：

当我向上拖动窗口时，我希望更改填充，以便所有6个项目仍然显示在窗口内容中。

以下是HTML的结构：

  <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>

这是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;
                }
            }
        }
    }

也是演示的链接 - https://jsfiddle.net/4szbvseb/

感谢任何帮助/建议。

Answer 1

I've edited your Fiddle我觉得你想要它做什么。所有需要做的事情是：

摆脱padding
将height 100％添加到html，body和.container
将.top-menu从顶部伸展到71px，从底部伸展到0
给予所有＆＃39; li＆＃39;元素a height为33.3％

你完成了：）

希望这有帮助

如何设置容器的填充相对于浏览器窗口的高度

1 个答案: