Большое отрицательное поле для создания боковых панелей полной длины

Question

Большое отрицательное поле для создания боковых панелей полной длины

0

ПРОБЛЕМА: Я хочу создать две боковые панели, которые работают по всей длине их родительского контейнера, которые усекаются нижним колонтитулом, а также реагируют.

Похоже, что существует несколько методов, но на данный момент я решил попробовать его с помощью больших отрицательных полей и отступов. Я основываю свои усилия на этом примере (http://jsfiddle.net/yJYTT/)

Добавив следующий CSS в правую боковую панель (с id="aside_secondary):

#aside_secondary {
float: right;
width: 17%;
background-color: #ececec;
padding: 14px;
margin-bottom:-8000px;
padding-bottom:8000px;
}

Я действительно получаю эффект, похожий на то, что я хочу, но если вы посмотрите здесь на результат (http://jsfiddle.net/danieldropik/rjyvR/4/), у меня есть следующие проблемы:

Светло-серая правая боковая панель (id="aside_secondary") выходит за пределы темного серого id="aside_secondary" колонтитула, когда действительно, я хочу, чтобы темный серый нижний колонтитул был самым нижним id="aside_secondary" страницы. (ПРИМЕЧАНИЕ: эта проблема не возникает в скрипте, которую я использую для refrence (http://jsfiddle.net/yJYTT/)

Вот фото:

Daniel Dropik 10 дек. 2013, в 22:14

Источник

Теги:

html

css

css3

1 ответ

Ещё вопросы

damoiser · Answer 1 · 2013-12-10T18-47-00.000Z

Я нахожу рабочее решение, сначала изменяю ваш css для sidebar_right (удаляем отступы и поля):

#aside_secondary {
float: right;
width: 17%;
background-color: #ececec;
padding: 14px;
}

Затем играйте с jQuery, когда страница заканчивается для рендеринга (или когда визуализируется боковая панель) запустите это:

$("#aside_secondary").css("height", $("#aside_primary").height());

Это ставит высоту sidebar_left на sidebar_right.

Когда вы не знаете, может ли входной текст быть наоборот (высота справа больше высоты слева), вы можете сделать что-то вроде этого:

  function fix_sidebars_height() {
    var left_sidebar_height = $("#aside_primary").height();
    var right_sidebar_height = $("#aside_secondary").height();
    if (left_sidebar_height <= right_sidebar_height) {
      $("#aside_primary").css("height", right_sidebar_height);
    } else {
      $("#aside_secondary").css("height", left_sidebar_height);
    }
  }

  // then call when the render is complete
  fix_sidebars_height();

Вы должны исправить высоту с помощью jQuery, потому что меньшие боковые панели "не знают" высоту (сколько контента) другой.

Добавлен JsFiddle DEMO

Спасибо. Я использовал технику JQuery для решения проблемы за короткое время.