将网站内容与导航栏对齐

Question

我正在尝试使用 HTML/CSS 和 JS 设计一个作品集网站。我完成了动画、切换到导航栏以及网站的总体设计。当我想将一些内容作为文本添加到我的网站时，我看到包含网站内容的 div 扩展到网页顶部并穿过导航栏。

我希望它的行为方式是 div 始终开始居中对齐并位于导航栏本身下方。我知道我必须对相对定位做一些事情，但我不确定如何做。同时，我的 div 应该根据需要向下展开，以便我可以滚动浏览网站。在尝试解决此问题时，div 变得可滚动，而不是覆盖整个页面并使其可滚动。

这是我当前的代码：

https://codepen.io/dderingezgin/pen/LEPBNLj?editors=1000

这可能是具体有问题的部分

.sub-section {
            display: none;
            position: relative;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            background-color: transparent;
            color: inherit;
            padding: 2rem;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid currentColor;
            opacity: 0;
        }

.sub-section.active {
            display: block;
            animation: fade-in 0.8s ease forwards;
        }

我试图使 div 可滚动 --> 它“字面上”使 div 可滚动而不是展开它。 我试图让 div 位于导航栏后面 --> 它确实位于导航栏后面，但不能完全滚动。

Answer 1

/* Ensure the navbar has a fixed height */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Adjust this based on your navbar height */
    background-color: #333;
    color: white;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjust the .sub-section to start below the navbar */
.sub-section {
    display: none;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 60px; /* Same height as the navbar */
    width: 80%;
    background-color: transparent;
    color: inherit;
    padding: 2rem;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid currentColor;
    opacity: 0;
    min-height: 100vh; /* Ensures it takes at least the full viewport height */
}

.sub-section.active {
    display: block;
    animation: fade-in 0.8s ease forwards;
}

/* Make sure body content is scrollable */
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}