Установите высоту элементов списка, чтобы заполнить родительскую высоту жидкости

Question

У меня есть ширина жидкости div (ширина: 100%), которая содержит неупорядоченный список ширины жидкости (ширина: 30%) и блок ширины жидкости (ширина: 70%), расположенных справа от него. Поскольку блок содержимого превышает высоту неупорядоченного списка, я бы хотел, чтобы высота каждого элемента списка увеличивалась, чтобы заполнить высоту контейнеров. Очевидно, что высота ли 25% не будет работать, но это то, что я ищу. Я застрял. Какие-либо предложения?

<div id="container"> 
    <ul id="tabs"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
    </ul> 
    <div id="content"> 
     <p>Lorem ipsum dolor sit amet...</p> 
    </div> 
</div> 

Answer 1

Если вы готовы, чтобы добавить дополнительный контейнер для вашего HTML:

<div id="container"> 
    <div id="tabs-wrapper"> 
     <ul id="tabs"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p>Lorem ipsum dolor sit amet...</p> 
    </div> 
</div> 

Затем вы можете использовать магию display: table; и display: table-row; размера ваших Li элементов в соответствии с чистым CSS.

Я использовал position: absolute; вокруг элемента tabs-wrapper и метод 'stretch', объявляющий экстенты каждой стороны, где я хочу их, чтобы он заполнил высоту основного контейнера.

#container { 
    position: relative; 
} 
#tabs-wrapper, #content { 
    display: inline-block; 
} 
#tabs-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 70%; 
    bottom: 0; 
} 
#tabs { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
#tabs li { 
    display: table-row; 
} 
#content { 
    width: 70%; 
    margin-left: 30%; 
} 

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

Вот скрипка:

http://jsfiddle.net/Dx4L8/

Answer 2

Вы можете попробовать это, добавив статический фон для вашего неупорядоченного списка (ширина: 30%), как это:

#your_tab_id_here:before { 
    content: ""; 
    display: block; 
    width:30%; 
    position: fixed; 
    bottom: 0; 
    top: 0; 
    z-index: -9999; 
    background-color: #cccccc; // same with the background of your tabs 

}

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

See my JSFiddle Here

Answer 3

С JQuery:

var adjustHeight; 

$(document).ready(function() { 
    var $tabs = $('#tabs'); 
    var $content = $('#content'); 

    adjustHeight = function() { 
     var tabsH = $tabs.height(); 
     var contentH = $content.height(); 
     if(contentH > tabsH) { 
      $tabs.height(contentH); //set height if greater than tabs 
     } else { 
      $content.attr('height', ''); //remove height if one has been set 
     } 
    } 

    adjustHeight(); 

    // If the #content height changes, you need to rerun adjustHeight() 
}); 

Этот код будет работать при первой загрузке страницы. Если высота #content изменяется после загрузки страницы (например, если содержимое изменяется с помощью ajax), вам необходимо настроить обратный вызов для запуска adjustHeight().