From 7930f87dca180627d72893cf0aabe82963d3da35 Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Fri, 18 Dec 2015 22:00:48 -0200 Subject: [PATCH 1/3] Flexible Height Explanation --- README.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c7cebf53..971fb124 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,8 @@ A collection of tips to help take your CSS skills pro. 1. [Equal Width Table Cells](#equal-width-table-cells) 1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox) 1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links) -1. [Style "Default" Links](#style-default-links) +1. [Style "Default" Links](#style-default-links) +1. [Use % height on elements](#percent-height) ### Use `:not()` to Apply/Unapply Borders on Navigation @@ -254,7 +255,22 @@ a[href]:not([class]) { Now links that are inserted via a CMS, which don't usually have a `class` attribute, will have a distinction without generically affecting the cascade. +### Percent Height + +For apply a flexible height (in percent) to a element in HTML, you need that a previous level element have a **fix** height, something like: + +```css +.my-outer-element { + height : 100px +} + +.my-outer-element > .my-inner-element { + height : 50% +} +``` + +Now we have `.my-outer-element` with **100px** of height, and a `.my-inner-element` that will have **50%** of the previous element height, so **50px**. ### Support -These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11. \ No newline at end of file +These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11. From 4a5cf02b35f2b7ddfa2547655bb6e56ad88b7f3e Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Sat, 19 Dec 2015 08:57:35 -0200 Subject: [PATCH 2/3] Fix Typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 971fb124..bfff5f54 100644 --- a/README.md +++ b/README.md @@ -257,7 +257,7 @@ Now links that are inserted via a CMS, which don't usually have a `class` attrib ### Percent Height -For apply a flexible height (in percent) to a element in HTML, you need that a previous level element have a **fix** height, something like: +For apply a flexible height (in percent) to a element in HTML, you need that a parent element element have a **fixed** height, something like: ```css .my-outer-element { @@ -269,7 +269,7 @@ For apply a flexible height (in percent) to a element in HTML, you need that a p } ``` -Now we have `.my-outer-element` with **100px** of height, and a `.my-inner-element` that will have **50%** of the previous element height, so **50px**. +Now we have `.my-outer-element` with **100px** of height, and a `.my-inner-element` that will have **50%** of the parent element height, so **50px**. ### Support From 3a29e0cb3160ca27e06b2ef4e00820026c1987bf Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Sat, 19 Dec 2015 08:58:14 -0200 Subject: [PATCH 3/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bfff5f54..2c205fa7 100644 --- a/README.md +++ b/README.md @@ -257,7 +257,7 @@ Now links that are inserted via a CMS, which don't usually have a `class` attrib ### Percent Height -For apply a flexible height (in percent) to a element in HTML, you need that a parent element element have a **fixed** height, something like: +For apply a flexible height (in percent) to a element in HTML, you need that a parent element have a **fixed** height, something like: ```css .my-outer-element {