Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
24 / 17 / 8
Регистрация: 29.12.2010
Сообщений: 161

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

16.01.2019, 16:59. Показов 1087. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Нашел на просторах вот этот код
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);
    }
});


А он совсем не хочет работать, как быть
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.01.2019, 16:59
Ответы с готовыми решениями:

Выравнивания блоков
Добрый вечер. При создания шаблона возникла проблема с блоками, блоки нужно чтобы розмещались как на http://cara.genbutheme.com а они ведут...

Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта
Нужно расположить открывающийся дочерний пункт меню (третьего уровня) его верхней границей по середине высоты пункта родительского меню. ...

Адаптивность блоков и её высоты
Всем привет! А кто мне может посоветовать как сделать так, чтобы, например, когда я экран сужаю и чтобы блоки пропорционально меняли свою...

4
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3952 / 2061 / 829
Регистрация: 13.03.2010
Сообщений: 6,782
16.01.2019, 19:16
toothcomp, jQuery подключите.
0
24 / 17 / 8
Регистрация: 29.12.2010
Сообщений: 161
17.01.2019, 05:19  [ТС]
Так он вроде включен

Добавлено через 9 минут
Да вот хоть тресни не работает
в другом редакторе попробовал
https://jsfiddle.net/toothcomp/jfhu710w/2/
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3952 / 2061 / 829
Регистрация: 13.03.2010
Сообщений: 6,782
17.01.2019, 08:18
toothcomp, ещё раз повторюсь - всё работает. Подключите jQuery. Если на вашем сайте не работает, то проверьте, чтобы jQuery подключался ДО скрипта.
Миниатюры
Не работает пример выравнивания высоты блоков  
0
24 / 17 / 8
Регистрация: 29.12.2010
Сообщений: 161
17.01.2019, 09:27  [ТС]
Спасибо .. сроду бы не знал.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
17.01.2019, 09:27
Помогаю со студенческими работами здесь

Выравнивание высоты блоков по содержимому
Всем доброго времени суток! Проблема у меня избитая, но за весь день я не смог найти решения. Имею сайт на блочной верстке....

Автомтаческое изменение высоты блоков внутри фиксированного блока
Всем добрый день! При блочной верстке столкнулась с такой проблемой. Есть внешний фиксированный по высоте блок &quot;main&quot;, внутри...

Выравнивание высоты всех блоков по одному самому большому
Нужно выровнять все блоки по одному самому большому .crp_related { clear: both; margin: 10px 0; } .crp_related h3 { ...

Пирамиду какой наибольшей высоты можно построить из набора блоков
Замечание В приведенном примере пирамида будет состоять из двух блоков: нижним будет блок с номером 3, а верхним – блок с номером 2. Блок...

Задать высоту дочернего блока с учётом высоты родительских блоков
Всем привет. Есть сайт pes-ural.ru В коде есть блок под названием general У этого блока высота стоит 100%. Вышестоящие над ним...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Загрузка 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 , при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru