如何使两个元素都填充父元素（高度）？

Question

我在使两个元素完美对齐时遇到问题。 它们在同一行，左边是输入元素，右边是 div，在“bar”（也是 div）中。 请看图片。

我希望它看起来像两个元素具有完全相同的高度，用类名“包装器”从灰色 div 的顶部到底部填充。

我已经简化了代码，按钮显然不起作用。 您在此处的代码中看到的是反应应用程序的一小部分，但这无关紧要，因为问题出在 CSS 中。 按钮必须是 div。

CSS 代码：

body{background-color: black}

.wrapper
{
    background-color: grey;

    padding: 0;
    margin: 0;
}

input
{
    font-size: 30px;
}

.button
{
  background-color: green;

  padding-left: 10px; 

  width: 100px;
  height: 100%;

  display: inline-block;
}

和 HTML 代码：

<body>
    <div class="wrapper">

        <input type="text" size="5"/>

        <div class="button">
            <p>
                Button
            </p>
        </div>

    </div>
</body>

我尝试将元素的“显示”来回设置为“内联”和“内联块”，并尝试将这些似乎不起作用的元素的高度设置为 100%。

感谢您的任何建议。

Answer 1

只需使用 flexbox

 body { background-color: black }.wrapper { background-color: grey; padding: 0; margin: 0; display: flex; } input { font-size: 30px; }.button { background-color: green; padding-left: 10px; width: 100px; }

 <body> <div class="wrapper"> <input type="text" size="5" /> <div class="button"> <p> Button </p> </div> </div> </body>

Answer 2

在包装器 class 添加display: flex; 并在输入标签上添加flex: stretch;

如何使两个元素都填充父元素（高度）？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-10 20:33:26

解决方案2
0 2020-06-10 20:35:28

如何使两个元素都填充父元素（高度）？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-10 20:33:26

解决方案2 0 2020-06-10 20:35:28

解决方案1
1 已采纳 2020-06-10 20:33:26

解决方案2
0 2020-06-10 20:35:28