Question

我试图在一个固定高度的盒子里面制作一个垂直导航栏。如何让按钮动态改变高度以适应盒子内部？这是一个证明我的意思的方法。

http://jsfiddle.net/0w3f2fm1/

所以现在如果我要添加第六个或第七个按钮，它们将被均匀拉伸以适合nav容器。是否可以仅使用css，或javascript / jquery干预？

注意：它们将使用后端php / mysql应用程序添加，而不是通过代码添加。

另请注意，我目前拥有的高度是使用填充完成的，因为我希望文本在按钮内居中。

由于

Answer 1

我建议使用html + css而不是javascript。

由于SO的新功能尚未运行，请点击此处：http://codepen.io/anon/pen/pHhEo

代码在这里：

<style>
    table {
        width: 200px;
        height: 400px;
    }
    table tr {
        vertical-align: middle;
    }
    table tr td {
        padding-left: 20px;
    }
    table tr td:hover {
        background-color: #000;
        color: #fff;
        cursor: default;
    }
</style>
<table>
    <tr>
        <td>Button 1</td>
    </tr>
    <tr>
        <td>Button 2</td>
    </tr>
    <tr>
        <td>Button 3</td>
    </tr>
    <tr>
        <td>Button 4</td>
    </tr>
    <tr>
        <td>Button 5</td>
    </tr>
</table>

如果更改高度，按钮的高度也会自动更改。

Answer 2

您可以使用Flex-box来实现您所描述内容的基本概念：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

它非常容易将事物（两个方向）放在中心位置，而且非常灵活，并且在如何分发内容方面也有很多选择。

唯一的缺点是它与旧浏览器的兼容性并不高。虽然它对新版本的支持相当得很好（作为标准添加它是一种强烈的嗜好），取决于它将用于什么......

快速学习。

===========编辑，请参阅评论========

html:

    <body>
        <div class="container">
            <div class="item">Button1</div>
            <div class="item">Button2</div>
            <div class="item">Button3</div>
            <div class="item">Button4</div>
        </div>
    </body>

对于CSS：

body {
    height: 30em;
    border: 2px solid #ff00ff;
}

.container {
    height:100%;
    width: 10em;
    display: flex;
    flex-direction: column;
    justify-content:center;

}

.item {
    flex-grow: 1;
    flex-direction: column;
    border: 2px solid black;
}

Borders只是为了显示块的范围，如果你想在浏览器中尝试它。我查了一下，似乎所有新的浏览器（包括IE）都支持这个。

哦，还有其他你可能认为自己想要的东西：它们不一定要有相同的尺寸，你可以很容易地为它们设定比例。

如果你id =＆＃34; itemX＆＃34;对于每个按钮，您可以使用以下内容设置所需的任何比率：

#item1 {
  flex-grow: 1;
}

#item2 {
  flex-grow: 2;
}

#item3 {
  flex-grow: 1;
}

因此，在这种情况下，＃item2将使用可用容器的2/4（所以在这种情况下，容器的整个高度），其他每个1/4 ...

Answer 3

你问的问题是你已经给出了固定大小的父高，你希望拉伸子元素来填充父元素。

所以你必须以百分比给出li的高度。
关于文本的垂直居中，您可以使用display：table-cell，vertical-align：middle properties但是使用表格进行布局不是最佳做法。
所以我使用位置来居中对齐文本。

这是jsbin：

http://jsbin.com/jirozicifedo/2/

这是动态解决方案（Javascript）：

http://jsbin.com/batuyoxupofu/1/edit

使用css自动拉伸元素以适合父容器

3 个答案: