Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2020, 12:09
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Позиционирование контрола на странице.
Подскажите как правильно позиционировать контрол, чтобы он при изменении размеров окна браузера не пропадал из окна. Я делаю так: - в файле html контрола такой
<figure>
    <figcaption>Включить музыку</figcaption>
    <audio
        controls
src="./1.mp3"      
src="./1.ogg">
            <code>audio</code> element.
    </audio>
</figure>

- в файле css
figure {
position: fixed; 
top: 500px; 
left: 30px; 
padding: 20px;	 
font-size: 20px;
color: OrangeRed;
}

В таком случае при изменении окна браузера по горизонтали всё нормально, а при изменении по вертикале контрол уходит за пределы окна. Возможно ли это как-то исправить, или вариантов нет?
Файл во вложении.
Всем спасибо.

Последний раз редактировалось III, 25.04.2024 в 18:45.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2020, 12:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

III,
задайте top в процентах.
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2020, 12:32
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Сделал так
figure {
position: fixed;
top: 80%; 
left: 30px; 
padding: 20px;	 
font-size: 20px;
color: OrangeRed;
}
, но при сворачивании окна по вертикали примерно на 50% контрол опять пропадает.
Желательно как-то привязать контрол к нижней границе окна браузера.

Последний раз редактировалось III, 21.02.2020 в 12:36.
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2020, 13:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,793

Сообщение от III
Желательно как-то привязать контрол к нижней границе окна браузера
https://developer.mozilla.org/ru/docs/Web/CSS/bottom
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2020, 14:31
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Короче сделал так
figure {
width: 100%;
position: fixed;
bottom: 0;	 
font-size: 20px;
color: OrangeRed;
}
и вроде бы всё пашет как надо.
Всем спасибо.

Последний раз редактировалось III, 25.04.2024 в 18:45.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите спрятать элемент на странице Virusx2000 Элементы интерфейса 2 18.01.2019 18:49
Заставить работать скрипт для навигации по странице при переходе извне geol.post jQuery 5 29.10.2015 13:35
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
Переключение radiobutton на странице Дуб-Дубом Элементы интерфейса 2 24.09.2012 08:49
Не выполняется скрипт на подгружаемой странице AlThar ExtJS 1 21.01.2011 15:10