Блог

Главная - Вопросы по программированию - при сворачивании браузера имеет пробел при прокрутке

при сворачивании браузера имеет пробел при прокрутке

#html #css #stylesheet

#HTML #css #таблица стилей

Вопрос:

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

Кто-нибудь знает, почему это происходит? Я установил для своего div определенную высоту (т.Е. 900 пикселей, а не процент)?

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

1. Это действительно трудно сказать без разметки / css и ( также ) демонстрации.

2. Насколько мал должен быть браузер, чтобы произошел этот переполненный поток?

3. У меня тонна css, и похоже, что нет ничего, что обычно вызывает эту проблему. Мне просто интересно, сталкивался ли кто-нибудь с этим, если это проблема с переполнением или что нет. @JamWaffles: это начинает происходить, когда достигает заданной ширины;

4. Кроме того, имеет ли значение, где <style type='text/css'></style> и <script type='text/javascript'></script> в каком месте? У меня есть страница, скажем, заголовок, со стилем и сценарием, затем я включил другую страницу, скажем, тело, с другим стилем и сценарием. Может ли это быть возможной причиной причины?

5. Вам необходимо предоставить свой код .

Ответ №1:

Из вашего комментария это вполне может быть вашей проблемой; ваша фиксированная ширина. Попробуйте заменить width на max-width .

max-width будет вести себя почти так же, как width если содержащий элемент имеет такую ширину или шире, но позволит div сжиматься, когда он становится меньше заданной вами ширины.

Здесь есть простой пример. Растяните и измените размер нижней правой панели, чтобы увидеть ее в действии. Если это не сработает, нам нужно будет увидеть ссылку на страницу или демонстрацию в JSFiddle.

Ответ №2:

Вот решение для вас:

CSS

 .wrapper {
    display: block;
    width: 100%;
    padding: 10px 0; /* add some top   bottom padding */
    background-color: #252525;
}
.aligner {
    display: block;
    width: 960px; /* site width */
    margin: 0 auto;    
}
.container {
    display: inline-block;
}

HTML

 <div class="wrapper">
    <div class="aligner">
        <div class="container">
            // stuff
        </div><!-- /container -->
    </div><!-- /aligner -->
</div><!-- /wrapper -->

Это не самый красивый, но он позволяет вам добавлять цвета фона 100% ширины в любой раздел и работает в <IE8. Вы можете делать все, что вам нужно внутри div.container (float, position и т. Д.), И Это расширит элемент .wrapper (тем самым расширяя ваш цвет фона по вертикали). Вы не увидите пробелов с правой стороны, потому что цвет фона применяется к оболочке, которая имеет ширину 100%.

Каждый div.wrapper из них следует рассматривать как «раздел» — «заголовок», «функция», «содержимое», «нижний колонтитул» и т.д…