0

У меня есть вот такой div, и вот такой

Код:

#under {
  font-family: var(--righteous-font);
  position: fixed;
  left: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

span.gh {
  position: relative;
  top: -10px;
  left: 10px;
}

span.vk {
  position: absolute;
  top: -10px;
  right: 10px;
}
<div id="under">
  <span class="s1">
        Text_1
        <a href="..." target="_blank">
            <img class="logo" src="res/s1.png">
        </a>
        </span>
  <span class="s2">
        <a href="..." target="_blank">
            <img class="logo" src="res/s2.png">
        </a>
        Text_2
        </span>
</div>

div отображается корректно, как я хочу, но если я открою страницу со смартфона, при увеличении страницы, div остается на своём месте и смещается, как сделать так, чтобы div был всегда одном месте?

7
  • Другими словами, Вы хотите, чтобы в тот момент, когда пользователь будет масштабировать страницу, див изменял свое положение относительно страницы, но сохранял свое положение относительно экрана? 13 июн 2018 в 12:14
  • @Дмытрык, Да, все верно
    – TheTOXIN
    13 июн 2018 в 12:18
  • div при таком раскладе css свойств всегда остается на месте, увеличение страницы и изменение ширины окна браузера это разное. Тот самый пример в браузере Хром, если вы будете масштабировать окно просмотра браузера через ctrl + , то да, этот блок уедет вправо, но при изменении ширины через responsive инструмент ваш блок останется на месте так как имеет относительную ширину 100%
    – undefined
    13 июн 2018 в 12:20
  • @SelinCorvin, если есть событие, срабатывающее при масштабировании, то сделать такое, я думаю можно. 13 июн 2018 в 12:28
  • @Дмытрык а смысл, ведь масштабирование ctrl + никак к адаптивности не относится, тем более там ширина 100%, а если надо отследить изменение ширины, то тогда $(window).resize(function(){}) в помощь
    – undefined
    13 июн 2018 в 12:37

1 ответ 1

0

#under {
  font-family: var(--righteous-font);
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.8);
}

span.gh {
  position: relative;
  top: -10px;
  left: 10px;
}

span.vk {
  position: absolute;
  top: -10px;
  right: 10px;
}
<div id="under">
  <span class="s1">
        Text_1
        <a href="..." target="_blank">
            <img class="logo" src="res/s1.png">
        </a>
        </span>
  <span class="s2">
        <a href="..." target="_blank">
            <img class="logo" src="res/s2.png">
        </a>
        Text_2
        </span>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.