Seeking an elegant solution for having sections with a minimum height of 100% (window height). The div should expand to fit the content if it exceeds 100%, and vertically center the content within the div if it is smaller.
I have managed to find a simple solution for the 100% and expanding issue, as well as a workaround for vertical centering. However, the latter involves using an absolutely positioned inner wrapper which interferes with the expanding-to-content functionality.
Ideally, I envision the following structure:
<section> (height of window or child's height, whichever is greater)
<div> (content wrapper, height equal to parent section or stretching to fit content)
<p> (various content that expands the size of the wrapper and section OR centers if small)
</p>
</div>
</section>
Here is the current HTML...
<section id='a'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique dui tellus, sit amet laoreet est rhoncus sit amet. Donec ac fringilla enim, at molestie orci.
</p>
<p>
Vivamus accumsan id dui vitae laoreet. Donec rutrum magna et magna pulvinar lobortis. Vestibulum non lacinia augue. Nullam scelerisque venenatis enim suscipit vulputate. Vivamus magna ipsum, rhoncus ac laoreet auctor, tristique eget mi. Nam ultricies dui vel fringilla facilisis.
</p>
<p>
Aenean non ultrices risus, varius porta nunc. Morbi eu suscipit purus, eu posuere elit. Vivamus dictum rhoncus odio, id pharetra mi dapibus at.
</p>
<p>
Aenean non ultrices risus, varius porta nunc. Morbi eu suscipit purus, eu posuere elit. Vivamus dictum rhoncus odio, id pharetra mi dapibus at.
</p>
</section>
<section id='b'>
...content
</section>
<section id='c'>
...content
</section>
<section id='d'>
...content
</section>
...more sections
...as well as my Stylus styling...
html, body
width 100%
height 100%
padding 0
margin 0
section
width 85%
min-height 100%
border 1px solid black
display inline-block
margin 0
padding 0
position relative
float right
p
font-size 2em
font-family 'Helvetica'
font-weight bold
width 50%
margin-left auto
margin-right auto
Lastly, here's a link to a JSFiddle demonstrating my current approach: http://jsfiddle.net/L265z/
Your insights are greatly appreciated.