Блог

Главная - Вопросы по программированию - Часть содержимого, показывающая дополнительный пробел при прокрутке

Часть содержимого, показывающая дополнительный пробел при прокрутке

#html #css

#HTML #css

Вопрос:

 header{
    position: fixed;
    width: 100%;
    height: 57px;
    top: 0;
    background-color: gainsboro;
    float: left;
    right: 0;
}
article {
    /*position: fixed;*/
    width: 100%;
    background-color: deepskyblue;
    float: left;
    right: 0;
    margin-top: 57px;
    margin-bottom: 48px;
    /*height: 100%;*/
    }
footer{
    width: 100%;
    height: 48px;
    position: fixed;
    bottom: 0;
    float: left;
    right: 0;
    background-color: yellow;
}  
 <header>
        </header>
        <article>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p><p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
        </article>
        <footer>
        </footer>

В этом приведенном выше коде я попытался зафиксировать верхнюю и верхнюю части всегда в их соответствующей позиции, а часть содержимого можно прокручивать в соответствии с ее длиной.

  1. Проблема, с которой я сталкиваюсь, заключается в том, что при перемещении полосы прокрутки вверх отображается пробел.я не знаю, как с этим справиться, иногда это тоже отображается внизу
  2. Еще одна проблема, с которой я сталкиваюсь, — это дополнительное заполнение части содержимого.Мне присваивается значение свойства right:0 article.но он все еще показывает некоторые отступы.

как я могу исправить эти две проблемы?

Ответ №1:

В большинстве основных браузеров поле текста по умолчанию составляет 8 пикселей со всех сторон. Он определяется в пикселях таблицей стилей пользовательского агента, предоставляемой вашим браузером.

Вам нужно просто добавить css для body: 

 body {
  margin: 0px;
  padding: 0px;      
}

Но если у вас большой проект и вы хотите быть более полным, используйте normalize.css. Он сбрасывает множество значений по умолчанию, чтобы они были согласованы в разных браузерах.

Комментарии:

1. спасибо, брат… это решило вторую проблему, и ваш ответ для меня — отличное знание . снова tnx

2. я тоже хочу исправить первую проблему

Ответ №2:

сначала вам нужно нормализовать HTML-элемент с помощью полей и отступов, используя вот так

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