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

您可以通过向无序列表添加静态背景（宽度：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 2

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

Answer 3

如果您愿意为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元素周围使用了position: absolute;，并且将每一边的范围声明为我想要它们的'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/

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

3 个答案: