带有CSS高度为100％的输入元素，溢出父div。

Question

带有CSS高度为100％的输入元素，溢出父div。

4

我尝试创建一个类似于谷歌搜索框的搜索栏。我编写了以下HTML代码：

<div id="settings-menu">
    <div class="search">
        <div class="search-icon"><i class="fi-xwluhl-magnifying-glass-wide"></i></div>
            <div class="input">
                <input type="text" placeholder="Search" id="settings-search">
            </div>
        <span class="clear interactive"><i class="fi-xwluxl-times-wide"></i></span>
    </div>
</div>

以下是输入元素的CSS：

#settings-menu input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 16px;
    background-color: var(--main-bg-color);
    color: var(--main-color);
}

这是结果：

我不明白为什么输入内容会超出父容器。这是完整的JSfiddle代码链接：https://jsfiddle.net/Imabot/ub4y7w8f/

欢迎任何帮助和解释！

- Fifi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahmad Alfy · Accepted Answer

这是因为你的box-sizing设置为内容框。将其设置为border-box将解决尺寸问题。

*, ::before, ::after {
  box-sizing: border-box;
}

这是因为默认情况下，输入元素具有垂直填充。将盒子尺寸设置为content-box会将填充添加到高度值中。这使得元素的总高度为100％+填充，导致溢出。您可以在此处阅读有关盒子尺寸的更多信息。

如果您不想更改盒子尺寸，则可以依靠flexbox来正确对齐内容：

#settings-menu .search {
  align-items: center;
}

通过将 flex 子元素对齐到中心，输入框就不会溢出并且能正确地定位。