Как зафиксировать блок с картинкой?

@Igorby · Регистрация: 18.01.2016

Студворк — интернет-сервис помощи студентам

То есть прижать к верху посредством fixed. При этом высота блока динамическая, за счет уменьшения высоты картинки во время сужения экрана.

@AlexZaw · 28.03.2018, 16:13

Установить блоку position:fixed; top:0; ?

@Igorby · 29.03.2018, 07:15 **[ТС]**

AlexZaw,

Сообщение от AlexZaw

Установить блоку position:fixed; top:0;

Сам верхний блок зафиксируется. Но нижний блок с контентом, уйдет под него.
Для этого обычно верхнему блоку дают высотку или нижнему блоку отступ. Но это не подходит в ситуации где высота верхнего блока динамичная.

@AlexZaw · 29.03.2018, 10:17

А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока?

@Igorby · 29.03.2018, 11:13 **[ТС]**

Сообщение от AlexZaw

А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока?

И как это реализовать?

@AlexZaw · 29.03.2018, 11:48

Примерно так:

HTML5
1
2
3
4
5
6
<div id="fixed">
  <img src="http://placekitten.com/g/1000/200" alt="">
</div>
<div id="content">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore sit animi ut odio debitis, quas vel voluptatem praesentium, laborum error maiores molestiae nisi expedita eum neque nemo. Molestias, voluptate et.
</div>

CSS
1
2
3
4
5
6
7
img{
  max-width: 100%;
}
#fixed{
  position: fixed;
  top: 0;
}

JavaScript
1
2
3
4
5
6
7
8
var content = document.getElementById('content');
window.onresize = changeMarginTop;
 
function changeMarginTop() {
    var fixed = document.getElementById('fixed').offsetHeight;
    content.style.marginTop = fixed + 'px';
}
changeMarginTop()

@Igorby · 29.03.2018, 12:23 **[ТС]**

Сообщение от AlexZaw

JavaScript
1
2
3
4
5
6
7
var content = document.getElementById('content');
window.onresize = changeMarginTop;
function changeMarginTop() {
* * var fixed = document.getElementById('fixed').offsetHeight;
* * content.style.marginTop = fixed + 'px';
}
changeMarginTop()

Супер. Спасибо. Значит все таки нужен JS.

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Igorby 1 / 1 / 0 Регистрация: 18.01.2016 Сообщений: 195

	Как зафиксировать блок с картинкой? 28.03.2018, 15:53. Показов 2826. Ответов 6 Метки нет (Все метки) То есть прижать к верху посредством fixed. При этом высота блока динамическая, за счет уменьшения высоты картинки во время сужения экрана. 0

@AlexZaw Модератор 2380 / 1740 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	28.03.2018, 16:13
	Установить блоку `position:fixed; top:0;` ? 0

@AlexZaw Модератор 2380 / 1740 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	29.03.2018, 10:17
	А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока? 0