Блог

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

горизонтальная прокрутка html

#html #css #horizontal-scrolling

#HTML #css #горизонтальная прокрутка

Вопрос:

у меня есть простой пример css, и я не могу понять поведение одного из моих divs при отображении горизонтальной прокрутки. итак … когда в окне моего браузера необходимо отобразить горизонтальную прокрутку (когда ширина окна меньше ширины моего div «содержимого» (1024px)), мой div «нижний колонтитул» (который имеет тот же родительский элемент «содержимого» и 100% ширину), кажется, получает «дополнительное пустое пространство» с правой стороны. это пространство увеличивается, когда я уменьшаю ширину окна. есть идеи о том, как я могу это отключить или почему это происходит??Спасибо!

вот мой код:

css: 

 <style type="text/css">

        html, body {
           height: 100%;
           width:100%;
           font-family:"Arial Black", Gadget, sans-serif;
           font-size:11px;
           font-variant:normal;
          }

          * {
           margin: 0;
           }

         .wrapper {
           min-height: 100%;
           height: auto !important;
           height: 100%;
          margin: 0 auto -4em;
          }

         #content{
          width:1024px;
          margin:0px auto;
          background-color:#990;
          height:780px;
         }

         .footer, .push {
             height: 4em;
           width:100%;
           }

          #footer-content{
           height:10px;
           background-color:#09F;
           width:100%;
          }
        </style>

HTML: 

 <body>
 <div class="wrapper">
        <div id="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer" style="background-color:#900; width:100%;">
        <div id="footer-content"></div>
    </div>
</body>

Ответ №1:

Я собираюсь начать с того, что это побочный эффект статически определенной ширины вашего содержимого DIV и определения ширины нижнего колонтитула как 100%.

Если вы заметили, ширина раздела 100% ширины всегда соответствует видимой ширине окна, тогда как статически определенный раздел всегда остается статического размера (как и следовало ожидать). При увеличении размера окна секция шириной 100% расширяется, чтобы заполнить этот размер. Когда размер окна уменьшается, оно уменьшается, чтобы заполнить только это окно. В последнем случае, когда окно становится меньше 1024 пикселей, статический DIV остается равным 1024, а динамический DIV уменьшается, чтобы соответствовать размеру окна, так что вы получаете полосу прокрутки внизу, потому что у вас есть статическое содержимое за пределами видимой ширины окна. Вы прокручиваете в сторону, а динамический div остается того же размера, что и видимая ширина окна, и затем вы видите пустое пространство рядом с ним.

Одним из решений было бы придать секции 1024 ширину в процентах, скажем, 80%, таким образом, она сжимается и расширяется вместе с нижней секцией. Либо это, либо установите минимальную ширину: 1024px для вашего раздела 100%.