Question

我遇到了一个问题，在经过数小时的尝试后，我无法解决。我想为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;
    }

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

谢谢

Answer 1

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

overflow:hidden

，您不应再看到滚动条

无法通过导航栏滚动的网页

1 个答案: