Реализовать левый сайдбар, как на примере

@zudogav · Регистрация: 20.11.2014

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

Подскажите, каким образом реализовать хедер слева как здесь?
Как сделать, чтобы ширина контента была 100% не от левого края экрана, а от фиксированного блока хедера

@mrtoxas · 25.10.2016, 18:17

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

@zudogav · 25.10.2016, 18:37 **[ТС]**

Сделал, но если уменьшать высоту браузера, то текст в фиксированном блоке скрывается.
Как реализовать прокрутку фиксированного блока?

@mrtoxas · 25.10.2016, 19:03

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html,body{
  height:100%;
  
}
.block{
  position: fixed;
  width:200px;
  height:100%;
  background:gray;
}
.content{
  position: absolute;
  height:100%;
  width:100%;
  overflow: hidden;
  overflow-Y:auto;
}

HTML5
1
2
3
4
5
<div class="block">
  <div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quis neque maxime modi dolores vero doloremque error ad, placeat voluptates iure nihil, molestias et reprehenderit, eligendi eos dicta unde eius.
    </div>
</div>

Но не думаю, что это красиво будет. Вот на странице по вашей ссылке сделали - при уменьшении ширины окна, хедер перестает быть фиксированным и занимает свое первоначальное место.

@zudogav · 25.10.2016, 19:16 **[ТС]**

Про ширину понятно. Вопрос в другом, если ширина остается для монитора, а высота уменьшается. В примере в этом случае видимо скриптом меняется свойство top у фиксированного блока. Вот это и не понятно как сделать

@mrtoxas · 25.10.2016, 19:21

Вы смотрели мой пример? Или вы хотите, чтобы хедер доходил до нижнего края, становился фиксированным там, и обрезался бы верхней границей экрана?

@zudogav · 25.10.2016, 19:26 **[ТС]**

Конечно посмотрел. Да, нужно чтобы при прокрутке прокручивалась сама страница и вместе с ней хэдер, который останавливался бы в нижнем положении.

@Fedor92 · 25.10.2016, 19:28

mrtoxas, не мудри особо, у него там parallax...

zudogav, хедер - это шапка, в Вашем случае на десктопе - это левый сайдбар... Поэтому умный человек дал классу название side-header, то бишь на десктопной версии - side, на мобильной header... Улавливаете мысль?

@zudogav · 25.10.2016, 19:36 **[ТС]**

Я это улавливаю. Но вопрос не про мобильную версию. А про десктоповую, но с уменьшеной высотой

@Fedor92 · 25.10.2016, 19:41

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

Но вопрос не про мобильную версию.

Я к этому и подводил, что у Вас вопрос по вёрстке сайдбара, а не шапки...

А высота отступа контентной части от верха при уменьшении высоты экрана высчитывается js-скриптом на странице, что Вы предоставили...

@zudogav · 25.10.2016, 21:49 **[ТС]**

А как бы стыбрить этот скрипт?

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44

	Реализовать левый сайдбар, как на примере 25.10.2016, 17:57. Показов 6031. Ответов 10 Метки нет (Все метки) Подскажите, каким образом реализовать хедер слева как здесь? Как сделать, чтобы ширина контента была 100% не от левого края экрана, а от фиксированного блока хедера 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.10.2016, 18:17
	Ну ладно еще по картинке объяснять, но есть уже готовая рабочая страница и вы спрашиваете как? Откройте инструменты разработчика и посмотрите как там у них все сделано и какие стили используются. Или за вас посмотреть, а потом пересказать? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 18:37 [ТС]
	Сделал, но если уменьшать высоту браузера, то текст в фиксированном блоке скрывается. Как реализовать прокрутку фиксированного блока? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 19:16 [ТС]
	Про ширину понятно. Вопрос в другом, если ширина остается для монитора, а высота уменьшается. В примере в этом случае видимо скриптом меняется свойство top у фиксированного блока. Вот это и не понятно как сделать 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.10.2016, 19:21
	Вы смотрели мой пример? Или вы хотите, чтобы хедер доходил до нижнего края, становился фиксированным там, и обрезался бы верхней границей экрана? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 19:26 [ТС]
	Конечно посмотрел. Да, нужно чтобы при прокрутке прокручивалась сама страница и вместе с ней хэдер, который останавливался бы в нижнем положении. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	25.10.2016, 19:28
	mrtoxas, не мудри особо, у него там parallax... zudogav, хедер - это шапка, в Вашем случае на десктопе - это левый сайдбар... Поэтому умный человек дал классу название side-header, то бишь на десктопной версии - side, на мобильной header... Улавливаете мысль? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 19:36 [ТС]
	Я это улавливаю. Но вопрос не про мобильную версию. А про десктоповую, но с уменьшеной высотой 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 21:49 [ТС]
	А как бы стыбрить этот скрипт? 0