Javascript 使用css自动拉伸元素以适应父容器_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript 使用css自动拉伸元素以适应父容器,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在一个固定高度的盒子里做一个垂直的导航条。我怎样才能使按钮动态地改变高度，使其与盒子内的高度相等？这里有一个jsfiddle来演示我的意思所以现在，如果我要添加第六个或第七个按钮，它们将被均匀拉伸以适合nav容器。是否可以只使用css，或者javascript/jquery是否应该介入注意：它们将使用后端php/mysql应用程序添加，而不是通过代码添加另外请注意，我当前的高度是使用填充完成的，因为我希望文本在按钮内居中谢谢我建议使用html+css而不是javascript 由于

我想在一个固定高度的盒子里做一个垂直的导航条。我怎样才能使按钮动态地改变高度，使其与盒子内的高度相等？这里有一个jsfiddle来演示我的意思

所以现在，如果我要添加第六个或第七个按钮，它们将被均匀拉伸以适合

nav

容器。是否可以只使用css，或者javascript/jquery是否应该介入

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

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

谢谢

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

由于SO的新功能尚未发挥作用，请链接此处：

代码如下：

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


桌子{
宽度：200px；
高度：400px；
}
表tr{
垂直对齐：中间对齐；
}
表tr td{
左侧填充：20px；
}
表tr td：悬停{
背景色：#000；
颜色：#fff；
游标：默认值；
}
按钮1
按钮2
按钮3
按钮4
按钮5

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

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

它非常容易集中（双向），而且非常灵活，而且在如何分发内容方面有很多选择

唯一的缺点是，它与旧浏览器的兼容性不是很好。不过，对于较新的版本，它得到了相当好的支持（这是一个作为标准添加的强canditate），这取决于它的具体用途

学习也很快

============编辑，请参见备注========

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>

如果您想在浏览器中尝试，边框仅用于显示块的范围。我检查了一下，似乎所有的新浏览器（包括IE）都支持这个

哦，还有一件事你可能会决定你到底想要什么：它们不必大小相等，你可以很容易地为它们设定比例

如果为每个按钮设置id=“itemX”，则可以使用以下设置所需的任何比率：

#item1 {
  flex-grow: 1;
}

#item2 {
  flex-grow: 2;
}

#item3 {
  flex-grow: 1;
}

因此，在这种情况下，#item2将使用可用容器的2/4（在本例中，即容器的全高），其他的各使用1/4…

问题在于，您给定了固定大小的父元素高度，并且希望子元素拉伸以填充父元素

所以你必须以百分比的形式给出li的高度
关于文本的垂直居中，您可以使用“显示：表格单元格”、“垂直对齐：中间”属性，但将表格用于布局不是最佳做法
所以我用位置来对齐文本

以下是jsbin：

以下是动态解决方案（Javascript）：

是否希望导航按钮填充父框的高度？（主框，包裹导航？）是的。使所有按钮均匀地填充父框。没有办法继续使用ul>li>a而不是表？你可以。但这次我想Javascript是必要的。很有趣！这是我第一次听说Flex。但是，它不会调整图元的大小，只会在它们之间均匀地放置间距。如果框内有许多固定高度的项目，则效率不高。您可以在子元素上使用flex grow&flex shrink，它将调整它们的大小。。。效率方面的优势我必须承认，我正在用它做小规模的工作，所以它并不重要……尽管从另一个角度来看，如果你要使用flexblox，你最好让你的设计具有响应性（这就是它的目的：使响应性设计更容易实现）。按钮之间仍会留下间隙。有趣的讨论。我在这方面没有太多的经验（这可能就是为什么我更容易选择flexbox，还没有自己的设计范例）。但不是，它不会，例如，请参见“编辑我的答案”。出于某种原因，它不适用于我的代码，但适用于您的代码。jsfiddle.net/0w3f2fm1/1以下是对原始代码的编辑。我做错了什么？这是可行的，但不是动态的。如果换了一个新按钮怎么办？我不想每次我想要一个新按钮时都不断地更改css。还有别的办法吗<代码>高度：自动不工作，所以可能是javascript？我希望您已经看到jsbin css中的注释。基本公式是除以li元素的数量，并将百分比表示为li高度。否则，使用@Francky_VI提到的flexbox确实看到了它们，但这种方法仍然会让我在每次添加按钮时编辑css。使用javascript可以做到这一点吗？我听说使用javascript进行样式设置不是一种最佳做法，但我们可以使用javascript来解决它。@TarekDeeb我已经更新了javascript解决方案，但不建议使用javascript来构建页面。

#item1 {
  flex-grow: 1;
}

#item2 {
  flex-grow: 2;
}

#item3 {
  flex-grow: 1;
}