Заголовок HTML не прокручивается до тех пор, пока не указывается точка в контенте

Я создаю веб-страницу, на которой будет длинный список вопросов. Я разделяю вопросы с помощью div, чтобы я мог перевести страницу в нужный раздел, включая раздел в верхней части страницы. Проблема в том, что заголовок не прокручивается с содержимым, как это было до того, как я начал добавлять контент. Перед добавлением содержимого заголовок будет прокручиваться, как только начнется прокрутка страницы. Теперь он задерживается, пока вы не дойдете до переключателей «Вопросы времени обслуживания». Я искал в Интернете, чтобы узнать, что может вызвать задержку прокрутки заголовка, но не нашел никаких полезных результатов.

Вот мой HTML:

<!DOCTYPE html>

<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Layout.css">
        <meta charset="UTF-8">
        <title>Sample Page</title>
    </head>
    <body>
        <div class="header">

            <h1>Sample Page</h1>
        </div>
            <div class="menu">
                <ul>
                    <li><a href="#cmsID">CMS ID & Auditor Name</a></li>
                    <li><a href="#serviceTime">Service Time Questions</a></li>
                    <li><a href="#narrative">Narrative Questions</a></li>
                    <li><a href="#diagram">Diagram Questions</a></li>
                    <li><a href="#photos">Photo Questions</a></li>
                    <li><a href="#estimatics">Estimatics Questions</a></li>
                </ul>       
            </div>
        <div class="content">
            <div id="cmsID" class="subcontent">
                <form action="./audit_submitted.php" method="post">
                <h3>CMS ID & Auditor Name</h3>
                <br/><br/>
                <p> Enter CMS ID:
                    <input type="text" name="cmsID" size="25" maxlength="25" value=""/>
                    <br/><br/>
                    Auditor Name:
                    <input type="text" name="auditorName" size="25" maxlength="25" value=""/>
                    <br/><br/>
                    Select Carrier: 
                    <select name="carrierID" required>
                        <option value="">Select...</option>
                        <option value = "0">GAIG/AMIG</option>
                        <option value = "1">Nat Gen</option>
                        <option value = "2">SoCal AAA</option>
                        <option value = "3">QBE</option>
                    </select>
                </p>
                </form>
                <br/><br/><br/>
            </div>
            <div class="subcontent" id="serviceTime">
                <br/>
                <h3>Service Time Questions</h3>
                <br/><br/>
                    <input type="radio" name="answer" value="1"> Yes
                    <input type="radio" name="answer" value="0"> No
                    <input type="radio" name="answer" value="1"> N/A
                <br/><br/>
            </div>
            <div class="subcontent" id="narrative">
                <br/>
                <h3>Narrative Questions</h3>
                <br/>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.

Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.

Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.

Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.

Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
                <br/><br/>
            </div>
            <div class="subcontent" id="diagram">
                <br/>
                <h3>Diagram Questions</h3>
                <br/>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.

Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.

Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.

Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.

Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
                <br/><br/>
            </div>

            <div class="subcontent" id="photos">
                <br/>
                <h3>Photo Questions</h3>
                <br/>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.

Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.

Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.

Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.

Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
                <br/><br/>
            </div>

            <div class="subcontent" id="estimatics">
                <br/>
                <h3>Estimatics Questions</h3>
                <br/>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.

Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.

Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.

Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.

Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
                <br/><br/>
            </div>
        </div>
        <div class="footer">
            &copy; Sample Company 2016
        </div>
    </body>
</html>

И вот мой CSS:

html, body {
    min-height: 100%;
    margin: 0%;
    width: 98%;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

*{
    margin: 0%;
    padding: 0%;
}

.header{
    color: #FFFFFF;
    background-color: #B31220;
    font-size: 2em;
    padding: 1% 0% 1% 2%;
    text-align: center;
    width: 98%;
    position: absolute;
}

.header img{
    float: left;
    width: 102px;
    height: 100px;
    top: 8%;
    background: #B31220;
}

.header h1{
    position: relative;
    top: 10px;
    left: 5px;
}

/*The menu class is fixed to the left hand side of the screen and takes up full 
vertical space available. It does however show up behind the header bar.*/
.menu{
    width: 12%;
    height: 100%;
    position: fixed;
    padding-top: 20%;
    z-index: -1;
    background-color: #505050;
    color: #FFFFFF;
}

.content{
    width: 88%;
    height: 100%;
    font-size: 1em;
    float: right;
    padding: 1%;
    padding-top: 10%;
    padding-bottom: 20%;
    position: absolute;
    z-index: -1;
    margin-left: 10%;
    background-color: #F8e8d2;
    overflow-y: scroll;
}

.subcontent{
    margin: 2%;
}

.footer{
    position: fixed;
    bottom: 0;
    width: 98%;
    background-color: #B31220;
    color:  #FFFFFF;
    clear: both;
    text-align: center;
    padding: .5% 1%;
}

/*Experimental Code*/

ul {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    width: 10%;
    background-color: #505050;
    height: 100%;
    position: fixed;
    overflow: auto;
}

li a {
    display: block;
    color: #FFF;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #B31220;
    color: white;
    border: 0;
}

html,css,

-1

Ответов: 3

1

Сделал несколько настроек для вашей таблицы стилей. Использование фиксированных и абсолютных в позициях вызывало большую часть проблемы. Давать определенные высоты каждому div имеет значение.

html, body {
    min-height: 100%;
    margin: 0%;
    width: 98%;
    font-family: Arial, Helvetica, sans-serif;

}

*{
    margin: 0%;
    padding: 0%;
}

.header{
    color: #FFFFFF;
    background-color: #B31220;
    font-size: 2em;
    padding: 1% 0% 1% 2%;
    text-align: center;
    width: 98%;
    height: 120px;
}

.header img{
    float: left;
    width: 102px;
    height: 100px;
    top: 8%;
    background: #B31220;
}

.header h1{
    position: relative;
    top: 10px;
    left: 5px;
}

/*The menu class is fixed to the left hand side of the screen and takes up full 
vertical space available. It does however show up behind the header bar.*/
.menu{
    width: 12%;
    height: 500px;
    float: left;

    background-color: #505050;
    color: #FFFFFF;
}

.content{
    width: 88%;
    height: 500px;
    font-size: 1em;
    float: left;
    background-color: #F8e8d2;
    overflow-y: scroll;
}

.subcontent{
    margin: 2%;
}

.footer{
    bottom: 0;
    width: 98%;
    background-color: #B31220;
    color:  #FFFFFF;
    clear: both;
    text-align: center;
    padding: .5% 1%;
}

/*Experimental Code*/

ul {
    list-style-type: none;
    margin: 0%;
    padding-top: 20%;
    width: 100%;
    background-color: #505050;

    overflow: auto;
}

li a {
    display: block;
    color: #FFF;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #B31220;
    color: white;
    border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A

0

Просто измените CSS в html, body for overflow-x: спрятано для переполнения: скрыто и добавлено #estimatics {margin-bottom: 200px}

0

Благодаря Джеффу, я смог отследить, что случилось. Его ответ не исправил проблему, но сделал ее более очевидной.

Я должен был изменить height: 100%;ин .contentк min-height: 100%;.

Я также добавил display: inline-block;к концу .content.

Наконец, я должен был добавить background-color: #F8e8d2;в .subcontentраздел, потому что субконтенты вызывают обесцвечивание в содержимом div.

Эти обновления фиксировали его так, что заголовок прокручивается, когда я начинаю прокручивать страницу, и мои ссылки перехода работают отлично.

HTML, CSS,
Похожие вопросы
Яндекс.Метрика