diff options
Diffstat (limited to 'files/es/web/css/height/index.html')
| -rw-r--r-- | files/es/web/css/height/index.html | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/files/es/web/css/height/index.html b/files/es/web/css/height/index.html new file mode 100644 index 0000000000..202c379583 --- /dev/null +++ b/files/es/web/css/height/index.html @@ -0,0 +1,231 @@ +--- +title: height +slug: Web/CSS/height +tags: + - Propiedad CSS + - Referencia +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>height</code></strong> especifica la altura del area de contenido de un elemento. El <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de contenido</a> está <em>dentro</em> del padding, borde, y margen del elemento.</p> + +<p>Las propiedades {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores clave */ +height: auto; + +/* Valores <length> */ +height: 120px; +height: 10em; + +/* Valores <percentage> */ +height: 75%; + +/* Valores globales */ +height: inherit; +height: initial; +height: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ver {{cssxref("<length>")}} para unidades disponibles.</dd> + <dt><code><percentage></code></dt> + <dd>Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la altura del bloque contenedor</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.</dd> + <dt><code>auto</code></dt> + <dd>El navegador calculará y seleccionará la altura para el elemento especificado.</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Use el tamaño <code>fill-available</code> para elementos inline o block, según sea más apropiado para el modo de escritura.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>La altura preferida intrínseca.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>La altura mínima intrínseca.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>La altura del bloque contenedor menos su margen vertical, borde y padding.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>El mayor entre: + <ul> + <li>la altura mínima intrínseca</li> + <li>la menor entre la altura prefereida intrínseca y la altura disponible</li> + </ul> + </dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>I'm 50 pixels tall.</span> +</div> +<div id="green"> + <span>I'm 25 pixels tall.</span> +</div> +<div id="parent"> + <div id="child"> + <span>I'm half the height of my parent.</span> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Añade las palabras clave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Incluye <code>height</code> como propiedad que puede ser animada.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Añade soporte para valores {{cssxref("<length>")}} y especifica a qué elementos es aplicable.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Añade nuevas palabras clave de tamaño para <code>width</code> y <code>height</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li> +</ul> |