Контейнер с фиксированным заголовком - Как исправить перекрытие заголовка с содержимым страницы при сохранении отзывчивости сайта?

Question

Я учусь создавать java веб-проектов, и я только начал использовать Bootstrap 4.

Проблема довольно проста, хотя я не уверен, как решить или найти другие способы достичь той же веб-страницы визуально. Я создал файл заголовка. JSP, который я вызываю с веб-страниц, которые я создаю.

Я хочу, чтобы заголовок был в фиксированной позиции, но, очевидно, когда вы делаете что-то фиксированное, он больше не находится в потоке документа? Что приводит к тому, что содержимое веб-страниц начинается с верхней части страницы за заголовком, а не после фиксированного заголовка.

Из того, что я видел при исследовании этой проблемы, вы можете вставить перекрывающееся содержимое в контейнер div, а затем присвоить ему верхний отступ в стиле, чтобы оно выглядело ниже на экране. Но я не хочу этого делать, потому что я хочу научиться создавать веб-страницы, которые могут реагировать на размер экрана. Я хочу, чтобы и P C, и телефоны автоматически видели удобную для пользователя страницу, поэтому она должна автоматически адаптироваться к размеру экрана. Если бы я добавлял заполнение вручную к контенту, то он будет хорошо смотреться только на устройствах с экраном того же размера, что и мой P C.

. Я включаю заголовок. jsp, чтобы дать Идея о том, что я сделал с этим. Пожалуйста, помогите мне исправить наложение, и я был бы признателен, если бы вы также сказали, как сделать так, чтобы код выглядел менее запутанным в коде, при этом оставаясь таким же визуальным, когда он открывается в браузере. У меня есть грязный заголовочный файл, так как я продолжаю редактировать его, когда узнаю больше о веб-программировании, поэтому заранее извиняюсь за беспорядок.

На всякий случай - для дополнительной информации я использую Tomcat в качестве своего сервера.

Здесь находится тег стиля заголовка. jsp, Messy:

<style type="text/css">
.container-fluid {
    background-color: white;    
}

.nav {
    background-color: lightblue;
}

.column {
    display:inline;
    float: right;
    overflow: hidden;
}

.tab-content {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    background-color:white;
}

body {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1%;
}
</style>

А вот тело заголовка. jsp:

    <nav id="nnnav" class="container-fluid pt-3  fixed-top">

        <div class="container-fluid pt-1" id= "dddiv">
            <img id="ChemOrbisLogo" alt="ChemOrbisLogo"
                src="//ddr92v0z0n69g.cloudfront.net/COND/img/chem/chemorbislogo.svg">
            <div class="column">
                <form class="form-inline">
                    <input class="form-control mr-sm-2" type="search" id="search"
                        type="text"
                        placeholder="Haber, fiyat, analiz, firma, alış ve satış talebi arama..."
                        name="search">
                    <button class="btn btn-outline-dark my-2 my-sm-0" type="submit">Ara</button>
                </form>
            </div>
        </div>

        <div id="navtabs" class="nav nav-tabs"  role="tablist">
            <a class="nav-item nav-link" data-toggle="tab" href="#anasayfa" role="tab" aria-selected="false">Anasayfa</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#menu1" role="tab" aria-selected="false">Menu 1</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#menu2" role="tab" aria-selected="false">Menu 2</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#menu3" role="tab" aria-selected="false">Menu 3</a>

        </div>

        <div id="contentBox" class="tab-content">
            <div id="anasayfa" class="tab-pane fade">
                <h3>HOME</h3>
                <p></p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliquaLorem
                    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor
                    sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliquaLorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magnaaliqua. Lorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
                    amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua..</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.</p>
            </div>

        </div>
    </nav>

А вот так я пытаюсь позвонить с другого jsp:

<body>

    <div class="header-container">
        <%@ include file = "header.jsp" %>
    </div>

    <div class="main-container">

    <h1>Burası anasayfa contenti</h1>

    <p> [Very long text to test page with scroll] </p>
        </div>

</body>