Created
August 3, 2013 10:22
-
-
Save nDmitry/6146011 to your computer and use it in GitHub Desktop.
Full height child of min-height parent
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Full height child of min-height parent | |
| */ | |
| .parent { | |
| margin: 100px; | |
| width: 200px; | |
| min-height: 200px; | |
| background: #eee; | |
| } | |
| .child { | |
| width: 100%; | |
| /* Spec: The percentage is calculated with | |
| * respect to the height of the generated | |
| * box’s containing block. If the height | |
| * of the containing block is not | |
| * specified explicitly (i.e., it depends | |
| * on content height), and this element is | |
| * not absolutely positioned, the value | |
| * computes to ‘auto’. | |
| */ | |
| height: 100%; /* -> auto */ | |
| background: #777; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="parent"> | |
| <div class="child"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
i was today years old when i knew this trick, thank you so much... new feature unlocked
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@nDmitry: Thank you! Illustrating the whole thing was very helpful!
Giving the child element some height (e.g.
height: 1px) immediately made it use the full parentmin-height.