Created
February 9, 2012 13:10
-
-
Save ZeeAgency/1779872 to your computer and use it in GitHub Desktop.
Auto-height Hack
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
| <!doctype html> | |
| <style type="text/css"> | |
| .outer { | |
| width: 200px; | |
| height: 200px; /* 200px = list's height, outer will end to 300px */ | |
| padding: 50px 0; /* Here's the Hack */ | |
| border: 1px dotted red; /* to aid debugging */ | |
| } | |
| .header, .footer { | |
| height: 50px; | |
| border: 1px dotted blue; /* to aid debugging */ | |
| } | |
| .header { | |
| margin-top: -50px; /* Here's the Hack */ | |
| } | |
| .list { | |
| height: 100%; /* this should end up approx 200px once the 50px header and footed are subtracted from the 300px container height */ | |
| overflow: auto; | |
| border: 1px dotted green; /* to aid debugging */ | |
| } | |
| .list ul { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| </style> | |
| <div class="outer"> | |
| <div class="header">header</div> | |
| <div class="list"> | |
| <ul> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| <li>Blah</li> | |
| </ul> | |
| </div> | |
| <div class="footer">footer</div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment