时间戳

首页 > 解决方案 > 不使用导航栏滚动的网页

html - 不使用导航栏滚动的网页

问题描述

我面临一个问题，经过数小时的尝试和重试，我无法解决。我想为 Web 应用程序准备一个页面，该页面无需滚动即可填充浏览器页面，该页面具有导航栏和两列（左侧一个部分，右侧一个部分）。这是我的代码：

<div class="container-fluid d-flex flex-column px-0">
        <div class="dpHeader">
            <nav class="navbar navbar-custom py-0">
                <a class="navbar-brand" href="/">
                    <img src="~/images/icon-64.png" style="height: 48px;" alt="Brand" />
                    My Application Name
                </a>
                <div>Name and Surname</div>
            </nav>
        </div>
        <div class="container-fluid d-flex px-0">
            <div class="dpPanelSx bg-info vh-100">Panel Sx</div>
            <div class="dpPanelDx">Panel Dx</div>
        </div>
    </div>

和CSS：

body, html {
    height: 100%;
}
/* set custom color for the nav bar*/
.navbar-custom {
    background-color: #034c67; /*#213B52;*/
}
    /* change the brand and text color */
    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
        color: rgba(255,255,255,.8);
    }
    /* change the link color */
    .navbar-custom .navbar-nav .nav-link {
        color: rgba(255,255,255,.5);
    }
    /* change the color of active or hovered links */
    .navbar-custom .nav-item.active .nav-link,
    .navbar-custom .nav-item:hover .nav-link {
        color: #ffffff;
    }

    .dpHeader {
        flex: 1;
    }

    .dpPanelSx {
        flex: 1;
    }

    .dpPanelDx {
        flex: 1;
    }

    .dpUserName {
        flex: 1;
    }

但是两列的高度超过了浏览器窗口和滚动条的出现。如何修改我的代码以实现我的目标？

谢谢

标签： htmlcssflexbox

解决方案

如果您只是不想滚动，您可以设置overflow-y:hidden正文的样式。因此，在您的 CSSbody, html部分中，只需附加

overflow:hidden

你不应该再看到滚动条了

推荐阅读