Не работает пример выравнивания высоты блоков

@toothcomp · Регистрация: 29.12.2010

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

Нашел на просторах вот этот код
https://codepen.io/andrej-zhakenow/pen/jXRryv

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<header>Шапка страницы</header>
<div class="container">
  <div class="main">
    <h1>Основной контент</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.wgsdsweeesseseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeee
      eeeeeeeeeeeeeeeeeeeeeee
      ..</p>
  </div>
  <aside>
    <h2>Боковая колонка</h2>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
  </aside>
</div>
<footer>Подвал страницы</footer>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
*{box-sizing:border-box}
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
}
.container:after {
  content:"";
  display: table;
  clear: both;
}
.main {
  float: left;
  width: calc(100% - 330px);
  background: #EC5A45;
  padding: 30px;
}
aside {
  width: 300px;
  float: right;
  background: #EC5A45; 
  padding: 30px;
}
footer {
  padding: 30px 60px;
  background: #80C8A0;
}
 
@media (max-width: 860px) {
  .main, aside {
   min-height: auto !important;
   float: none;
   width: 100%;
 } 
  .main {
   margin-bottom: 30px;
 }
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
jQuery(document).ready(function($) {
  var content = $('.main');
  var sidebar = $('aside');
  var getContentHeight = content.outerHeight();
  var getSidebarHeight = sidebar.outerHeight();
  
  if (getContentHeight > getSidebarHeight) {
    sidebar.css('min-height', getContentHeight);
    }
  if (getSidebarHeight > getContentHeight) {
    content.css('min-height', getSidebarHeight);
    }
});

А он совсем не хочет работать, как быть

@gogolik · 16.01.2019, 19:16

toothcomp, jQuery подключите.

@toothcomp · 17.01.2019, 05:19 **[ТС]**

Так он вроде включен

Добавлено через 9 минут
Да вот хоть тресни не работает
в другом редакторе попробовал
https://jsfiddle.net/toothcomp/jfhu710w/2/

@gogolik · 17.01.2019, 08:18

toothcomp, ещё раз повторюсь - всё работает. Подключите jQuery. Если на вашем сайте не работает, то проверьте, чтобы jQuery подключался ДО скрипта.

@toothcomp · 17.01.2019, 09:27 **[ТС]**

Спасибо .. сроду бы не знал.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@gogolik Супер-модератор 3952 / 2061 / 829 Регистрация: 13.03.2010 Сообщений: 6,782
	16.01.2019, 19:16
	toothcomp, jQuery подключите. 0

@toothcomp 24 / 17 / 8 Регистрация: 29.12.2010 Сообщений: 161
	17.01.2019, 05:19 [ТС]
	Так он вроде включен Добавлено через 9 минут Да вот хоть тресни не работает в другом редакторе попробовал https://jsfiddle.net/toothcomp/jfhu710w/2/ 0

@gogolik Супер-модератор 3952 / 2061 / 829 Регистрация: 13.03.2010 Сообщений: 6,782
	17.01.2019, 08:18
	toothcomp, ещё раз повторюсь - всё работает. Подключите jQuery. Если на вашем сайте не работает, то проверьте, чтобы jQuery подключался ДО скрипта. Миниатюры 0

@toothcomp 24 / 17 / 8 Регистрация: 29.12.2010 Сообщений: 161
	17.01.2019, 09:27 [ТС]
	Спасибо .. сроду бы не знал. 0