如何在CSS中躲避顶部栏

Question

我想用CSS元素在CSS中创建一个完整的页面菜单。我不希望该页面滚动。

现在我正在使用VH来制作我的3行33vw中的每一行，但顶部的条似乎仍在计算中。所以页面仍然可以滚动。

我不希望页面滚动，所以我如何在CSS中有33％的高度计算顶部栏。

通过顶栏我说的是你的标签和地址所在的栏。

此外，该解决方案也适用于iOS吗？

Answer 1

如果我理解你的问题，这是你的答案：

overflow-x：hidden; 会隐藏x轴滚动

溢出-y：隐藏; 会隐藏y轴滚动

溢出：隐藏; 将删除两个滚动条

<style type="text/css">
    .main__container {
        position: relative;
        display: inline-block;
        top: 0;
        left: 0;
        height: 300px;
        width: 100px;
        /*Note - this is key as it will stop scroll x and y*/
        overflow: hidden;
    }
    .main__container .nav__container {
        position: relative;
        display: inline-block;
        height: 30px;
        width: 100%;
    }
    .main__container .content__list {
        position: relative;
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
        height: auto;
        width: 100%;
    }

    .main__container .content__list .content__row {
        position: relative;
        display: inline-block;
        height: 90px;
        width: 100%;
    }
</style>

<main class="main__container">
    <nav class="nav__container">
        {{--Nav HTML here --}}
    </nav>
    <ul class="content__list">
        <li class="content__row one"></li>
        <li class="content__row two"></li>
        <li class="content__row there"></li>
    </ul>
</main>