设置列表项的高度以填充流体父级高度

我有一个包含流体宽度无序列表（宽度：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

设置列表项的高度以填充流体父级高度

回答

相关问题