CODEWITHSUNDEEP
htmlcssinputheight
preahkumpii
preahkumpii

Reputation: 1301

CSS set height of element to % of automatic height

I am looking for a way in CSS to set the height of a text input to a percent of the normal height it would be given naturally given font-family/font-sizes, if the height was not declared. I am not looking for a percent of the height of the container it is in. Like so:
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>

Upvotes: 2

Views: 305

Answers (2)

Niloct
Niloct

Reputation: 9995

Use em:

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

Edit

Always good to remember:

4.3.1 Integers and real numbers

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.

So 1,5em was garbage, sorry!

Edit

Your comment about em is correct, 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.)

Upvotes: 1

Hayk Martiros
Hayk Martiros

Reputation: 2186

If jQuery is in play, you could do something like:

$('input').css('height',parseFloat($('input').css('height'))*1.5)

Working example:

http://jsfiddle.net/ghxh8/

Upvotes: 1

Related Questions