html - CSS 将元素的高度设置为自动高度的%

标签 html css input height

我正在CSS中寻找一种方法,将文本输入的高度设置为正常高度的百分比,如果未声明高度,则自然给出字体系列/字体大小。我不是寻找它所在容器高度的百分比。就像这样:
CSS:

#container {
    height: 100%;
    width: 100%;
}
input {
    width: 100%;
    background: orange;
    height: [I want this 150% of the height normally assigned to the element]
    font-family: inherit;
    font-size: inherit;
}
#results {
    width: 100%;
    background: pink;
    height: auto;
    height: 100%;
}

HTML:

<div id="container">
<input type="text">
<div id="results"></div>
</div>

最佳答案

使用em:

(...)
height: 1.5em;
(...)

编辑

永远好remember :

4.3.1 整数和实数

Some value types may have integer values (denoted by ) or real number values (denoted by ). Real numbers and integers are specified in decimal notation only. An consists of one or more digits "0" to "9". A can either be an , or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.

Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.

所以 1,5em 是垃圾,抱歉!

编辑

您对em的评论是正确的,see :

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

关于html - CSS 将元素的高度设置为自动高度的%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12233654/

相关文章:

html - 等高元素,在 flexbox 容器内底部对齐,纯 CSS

html - 错误 errors.GrailsExceptionResolver - 处理请求 : 时发生 ConcurrentModificationException

javascript - 隐藏添加此分享工具默认图标

java - 如何在Java中获取部分用户输入?

java - 读取文本文件并打印图形

jquery 高亮搜索以空格分隔的多个单词

html - 可以调整高度并保持 block 元素的纵横比,例如仅使用 CSS 的图像吗?

html - 将 Div 中的背景图片变成链接

html - 将百分比值设置为 border-width

javascript - 在焦点上添加柔光以输入