<length-percentage>

The <length-percentage> CSS data type represents a value that can be either a length or a percentage.
The <length-percentage> CSS数据类型表示一个值,该值可以是<length>或<percentage>。

Syntax

Refer to the documentation for length and percentage for details of the individual syntaxes allowed by this type.

Use in calc()

Where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. Therefore, all of the following values are acceptable for width:

width: 200px;
width: 20%;
width: calc(100% - 200px);

Specifications

Specification Status Comment
CSS Values and Units Module Level 4
<length-percentage>
Editor's Draft
CSS Values and Units Module Level 3
<length-percentage>
Candidate Recommendation Defines <length-percentage>. Adds calc()

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<length-percentage>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
Q unit
Experimental
Chrome Full support 63Edge No support NoFirefox Full support 49IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 49Opera Android Full support 46Safari iOS No support NoSamsung Internet Android No support No
cap unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ch unitChrome Full support 27Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes From Firefox 1 to Firefox 3, ch was the width of the M character.
Notes From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE Full support 9Opera Full support 20Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 7.1Samsung Internet Android Full support Yes
ex unitChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
ic unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
lh unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozmm unit
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support 4 — 59IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
rem unitChrome Full support 4Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 11.6Safari Full support 4.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 4Samsung Internet Android Full support Yes
rlh unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vb unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vh unitChrome Full support 20Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
vi unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vmax unitChrome Full support 26Edge Full support 16Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 1.5Chrome Android Full support 26Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support Yes
vmin unitChrome Full support 26Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: vm
Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 10
Full support 10
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: vm
Opera Full support 15Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support Yes
vw unitChrome Full support 20Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.