Question

我希望水平对齐的li元素都具有相同的高度和一些最小高度。我想随着li元素高度的增加，容器div的大小从某个最小高度增加。这是我尝试的jsfiddle：http://jsfiddle.net/6NKn2/a

HTML：

<div id='d'>
<ul id='u'>
    <li class='l'>item 1 long item long item long long long long long long</li>
    <li class='l'>item 2</li>
    <li class='l'>item 3</li>
</ul>

CSS：

#d {
    min-height: 100px;
    border: 1px solid black;
}
#u {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid green;
    height: 100%;
}
.l {
    float: left;
    border: 1px solid black;
    width: 50px;
    height: 100%;
}

我无法弄清楚如何实现这一目标。另外我想避免新的CSS3属性来支持旧的IE（7+）。使用JavaScript也没关系。你能帮我解决这个问题吗？感谢。

Answer 1

如果你想让所有<li>元素具有相同的高度，请使用这个JQuery代码：

var $height = 0 ;
$("li.l").each(function(){
    if(($(this).height())>$height){
            $height = $(this).height();
    }
});
$("li.l").each(function(){
    $(this).css("height",$height)
});

要增加容器的高度，您需要设置overflow:auto：

#d
{
    min-height: 100px;
    border: 1px solid black;
    overflow:auto;   /*  added  */
}

here is jsFiddle

Answer 2

跨浏览器最小高度

CSS min-height是解决IE中恼人的最小高度问题的最需要的css片段之一。

示例IE

#d  {
       min-height: 500px;
       height:auto !important;
       height: 500px;
       overflow:auto;
    }

Answer 3

添加overflow:auto;

对于实例，

#d {
    border: 1px solid #000000;
    min-height: 100px;
    overflow: auto;
}

<强> WORKING DEMO

Answer 4

#d
{
    min-height: 100px;
    border: 1px solid black;
    min-height: 500px;
    height:auto !important;
    height: 500px;
}

Answer 5

如何将overflow: auto添加到#d规则？

Answer 6

#d
{
    min-height: 100px;
    border: 1px solid black;
    float:left;
}

将此代码用于身份#d

Answer 7

删除#d中的min-height并放置css属性

float:left

Fiddle DEMO :

Answer 8

您可以通过将 ul 的高度应用于所有 li 来实现此目标

首先加载页面 ul 的高度，它等于具有最大高度的li的高度，并将相同的高度应用于内部 li

Here is the demo for it

Answer 9

首先，你需要提到容器#d

的最小高度

#d  {
   min-height: 500px;
   height:auto !important;
   height: 500px;
   overflow:auto;
}

另外，你需要添加左浮动列表元素的clearfix，以便在列表grwos高度时展开周围的容器：

<div id='d'>
  <ul id='u'>
    <li class='l'>item 1 long item long item long long long long long long</li>
    <li class='l'>item 2</li>
    <li class='l'>item 3</li>
  </ul>
  <div class="clearleft"></div>
</div>


.clearleft {
  clear: left;
}

这里是JSFiddle

相同的高度li和自动调整容器div的高度

9 个答案: