From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/height/index.html | 192 ++++++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 files/pt-br/web/css/height/index.html (limited to 'files/pt-br/web/css/height/index.html') diff --git a/files/pt-br/web/css/height/index.html b/files/pt-br/web/css/height/index.html new file mode 100644 index 0000000000..7d06fb0534 --- /dev/null +++ b/files/pt-br/web/css/height/index.html @@ -0,0 +1,192 @@ +--- +title: height +slug: Web/CSS/height +translation_of: Web/CSS/height +--- +
{{CSSRef()}}
+ +

Sumário

+ +

A propriedade height do CSS determina a altura da área do conteúdo de um elemento. A área de conteúdo consiste no padding, margin e border do elemento.

+ +

As propriedades {{Cssxref("min-height")}} e {{Cssxref("max-height")}} sobrepõem a {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
Sintaxe formal: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | complex | auto
+
+ +
height: auto     /* auto keyword */
+
+height: 120px    /* <length> values */
+height: 10em
+
+height: 75%      /* <percentage> values */
+
+height: inherit
+
+ +

Valores

+ +
+
<length>
+
Veja {{cssxref("<length>")}} para unidades disponíveis.
+
<percentage>
+
Especificada como uma {{cssxref("<percentage>")}} da altura do conteúdo do bloco.
+
border-box {{ experimental_inline }}
+
Se presente, o último {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado a  caixa de borda do elemento.
+
content-box {{ experimental_inline }}
+
Se presente, o último {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado a caixa de conteúdo do elemento.
+
auto
+
O navegador calculará a altura do conteúdo especificado.
+
max-content {{ experimental_inline }}
+
A altura máxima intrínseca.
+
min-content {{ experimental_inline }}
+
A altura mínima intrínseca.
+
available {{ experimental_inline }}
+
Altura da caixa menos margem vertical, borda e padding.
+
fit-content {{ experimental_inline }}
+
O maior de: +
    +
  • a altura mínima intrínseca
    • +
  • a menor entre a altura intrínseca preferida e a altura disponível
    • +
+
+
+ +

Exemplos

+ +

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>
+
+ +

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%;
+}
+
+ +

{{EmbedLiveSample('Exemplos')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Initial specification.
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{CompatGeckoDesktop("1")}}4.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf