Нижний колонтитул, превышающий ширину экрана со скользящей вертикальной панелью навигации - PullRequest
Новая
       18

Нижний колонтитул, превышающий ширину экрана со скользящей вертикальной панелью навигации

0 голосов
/ 20 февраля 2020

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

   <footer class="container">
      <div class="row">
         <div class="col-md-3">
            <a href="">link</a>
         </div>
         <div class="col-md-3">
            <a href="">link</a>
         </div>
      </div>
   </footer>

   //css
   html {
    position: relative;
    min-height: 100%;
    padding-bottom: 80px;
   }

   .legal {
    position: absolute;
    bottom: 0px;
    height: 80px;
    width: 100%;
    margin: 0;
   }

Поскольку я хочу, чтобы нижний колонтитул находился внизу, я установил его на абсолютный, а потому, что он наследовал свою ширину от содержимого, указанного выше, и был вытолкнут через панель навигации, он превысил экран на ширину Navbar. Но если бы я должен был установить левое поле для него, когда навигационная панель рухнула с изменением размера экрана, она все равно будет сидеть с полем и будет не на своем месте. Есть ли в любом случае, чтобы он все еще сидел на дне, не делая его абсолютным? Даже если для содержания выше установлено значение 100%, когда я делаю его относительно, оно все равно не внизу. Любая помощь будет оценена.

1 Ответ

1 голос
/ 20 февраля 2020

Поскольку вы не предоставили много подробностей о коде или скриншоте этой проблемы, я не могу сказать вам, как вы можете решить проблему с избыточной шириной, но вот что вы можете попробовать:

  • Попробуйте установить размер рамки в рамку для рамки

  • Чтобы нижний колонтитул прилипал к нижней части, вы можете попробовать несколько вариантов, таких как фиксированное положение и нижний 0 и добавление нижнего поля к остальная часть верхнего содержимого, которое должно быть точно равно максимальной высоте нижнего колонтитула.

  • Вы можете перемещать все в гибком контейнере и делать прокрутку только области содержимого с переполнением свойство с параметром flex, установленным в 1 (flex: 1; flex-flow: column).

  • Вы можете установить высоту контейнера содержимого на 100vh, чтобы он всегда был расширен и сохранит нижний колонтитул внизу.

Для проблемы переполнения ширины, убедитесь, что текст использует свойство «white-space: nowrap», чтобы он не устанавливал элементы нижнего колонтитула мин. -ширина к ширине текста. Или попробуйте установить переполнение X / Y скрытым, чтобы расширенный контент не отображался за пределами контейнера. Если вы используете flex, попробуйте использовать Flex-wrap, чтобы Flex мог автоматически подгонять компонент к ширине контейнера.

Надеюсь, это поможет!

...