設置列表項的高度以填充流體父級高度

我有一個包含流體寬度無序列表（寬度：30％）和流體寬度內容塊（寬度：70％）的流體寬度div（寬度：100％）位於它的右側。由於內容塊超過無序列表的高度，我希望每個列表項的高度都要增加以填充容器高度。很顯然，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>

來源

2013-10-09 Justin

你可以做一個小提琴？ –

如果列表項的數量是動態的，這對於CSS來說是不可能的，您需要一些額外的JS來解決這個問題。 –

這是一個固定數量的列表項。 – Justin

如果你願意額外的容器添加到您的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。

我在tabs-wrapper元素和'stretch'方法中使用了position: absolute;，這個方法聲明每個邊的範圍是我想要它們的地方，讓它填充主容器的高度。

#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/

來源

2013-10-09 01:30:03

謝謝，我真的很喜歡這個純CSS的解決方案。最終，我需要每個列表項的文本都是垂直居中的。除了將鏈接文本放在span元素中並將其設置爲顯示外，是否還有其他方法可以執行此操作：table-cell; vertical-align：middle; ？ – Justin

嗯，我想不出任何其他的方式。垂直對齊對於百分比/動態大小的元素來說是一件棘手的事情。 –

謝謝布萊克。我很感激幫助。 – Justin

您可以通過添加靜態背景，以您的無序列表（寬：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

來源

2013-10-09 01:08:04 Vainglory07

使用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()。

來源

2013-10-09 01:16:09 matthewpavkov

設置列表項的高度以填充流體父級高度

回答

相關問題