Сделать динамически генерируемые элементы списка высотой% от установленной родительской высоты

Question

Сделать динамически генерируемые элементы списка высотой% от установленной родительской высоты

0

Таким образом, у меня есть следующие вертикальные вкладки, установленные внутри родительского div с фиксированной высотой:

<div class="tabs-left">

  <ul class="nav-tabs">
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
  </ul>

  <a href="#">Add a tab</a>
</div>

Каждый элемент <li> является динамическим (их можно добавить или удалить). У родительских div- tabs-left есть высота набора 300px.

Как мне (с помощью css или jquery) установить высоту каждой вкладки равным общим% родительского div выше определенного количества вкладок?

Например, с 4 вкладками, как показано, они выглядят хорошо с максимальной высотой около 50 пикселей, но когда число увеличивается до 10 вкладок, я бы хотел, чтобы высота уменьшалась одинаково, чтобы соответствовать родительскому div.

Я понимаю с разборчивостью, что существует ограничение на количество вкладок, которые могут вписаться в высоту 300 пикселей, поэтому родитель должен прокручивать.

Я уже пробовал display: table-cell, display:block, height: auto т.д. На элементах li, без радости.

Если это имеет смысл, пожалуйста, помогите?

Karlgoldstraw 17 апр. 2014, в 13:43

Источник

Теги:

javascript

jquery

html

css3

3 ответа

1

Насколько я знаю, нет никакого способа сделать это с помощью css, так как css должен был бы знать количество li-элементов и вычислять высоту на основе того, чего он не может.

Итак, вот решение jQuery.

var tabs = $('.nav-tabs li');

if(tabs.length < 10){
    tabs.css('min-height', '50px')
}
else{
    var height = [desired height calculation];
    tabs.css('min-height', height + 'px')
}

Andreas 17 апр. 2014, в 09:01

0

Для справки мне удалось выполнить его с помощью функции, которая вычисляет высоту и применяет ОБА как минимальную высоту, так и максимальную высоту для списков перед прокруткой, когда отображается слишком много элементов:

JS:

resizeTabs(30, 55);
function resizeTabs(minHeight, maxHeight) {
    var tabs = $('.nav-tabs li a');
    var containerHeight = $('.nav-tabs').height();
    var tabHeight = containerHeight/tabs.length;
    tabHeight = Math.min(maxHeight, Math.max(minHeight, tabHeight));
    tabs.outerHeight(tabHeight + 'px');
}

HTML:

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
    </ul>
</div>

Теперь мой "tabbable" div установлен с высотой px, а вкладки listitem сами работают на основе этой высоты. Я дал margin-bottom:1px для каждой вкладки.

Спасибо всем за вклад.

Karlgoldstraw 17 апр. 2014, в 13:17

Ещё вопросы

Djave · Accepted Answer · 2014-04-17T09-58-00.000Z

Вы также можете сделать что-то вроде этого:

http://codepen.io/EightArmsHQ/pen/ixmBq/

Который будет считать элементы списка, выяснить, сколько места там, а затем правильно установить все их высоты. Если вы добавили или удалили больше элементов списка, вы просто вызываете функцию после того, как это произошло:

function work_out_height(){
  var li_count = $(".nav-tabs li").length;
  var li_height = parseInt($(".nav-tabs").height());
  var individual_height = li_height / li_count;
  console.log("count " + li_count)
  console.log("height " + li_height)
  console.log(individual_height)
  $(".nav-tabs li").each(function(){
    $(this).outerHeight(individual_height + "px");
  });
}

work_out_height();

$("#add").click(function(){
  var new_li = $(".nav-tabs li:first").clone();
  $(".nav-tabs").append(new_li);
  work_out_height()
})

редактировать

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

http://codepen.io/EightArmsHQ/pen/cKhny/

if(individual_height < smallest_height){
  individual_height = smallest_height;
  $(".nav-tabs").css({"overflow-y":"scroll"})
}else{
  $(".nav-tabs").css({"overflow-y":"hidden"})
}

Это работает почти идеально. Есть ли способ, когда высота каждой вкладки достигает высоты родительского элемента, она больше не уменьшает высоту каждого элемента? (а значит родитель просто прокручивает)?