1

我有一个流体宽度 div（宽度：100%），其中包含一个流体宽度无序列表（宽度：30%）和一个位于其右侧的流体宽度内容块（宽度：70%）。由于内容块超过了无序列表的高度，我希望每个列表项的高度增加以填充容器高度。显然 25% 的 li 高度是行不通的，但这就是我正在寻找的。我被困住了。有什么建议么？

<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>
4

3 回答 3

0

您可以通过向无序列表（宽度：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

}

此外，对于页脚，使用这种方法，只需尝试使其底部变粘:) 希望，这给了你这个想法..

在这里查看我的 JSFiddle

于 2013-10-09T01:08:04.640 回答
0

使用 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-09T01:16:09.170 回答
0

如果您愿意在 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/

于 2013-10-09T01:30:03.800 回答