I am currently experimenting with stacking two boxes on my mobile web application view using HTML/CSS. I prefer not to utilize JavaScript or hardcode values in this basic design.
Specifics:
The top box must have a dynamic height, with contents that are absolutely positioned and able to handle overflow (hidden if out of bounds).
The bottom box should have a fixed height.
I've been playing around and managed to create a solution found here. This design works well in Safari and Firefox. However, I am uncertain whether the CSS is entirely valid. Will it potentially break due to violating some obscure styling rule in the future? If so, how can I adjust the code to ensure validity?
I am not worried about browsers breaking the layout due to rendering issues, as those typically get resolved. My main concern is having correct and valid code from the beginning.
Below is the code snippet with CSS styling included in the fiddle:
<!-- body section containing padding -->
<div class="BodyContainer" >
<!-- table definition -->
<div class="table" style="padding: 0; margin: 0; width: 96vw">
<!-- row -->
<div style="display: table-row; padding: 0; margin: 0">
<!-- cell -->
<!-- dynamic height cell requiring overflow hidden -->
<div class="cell" style="width: 100%">
<!-- inner relative cell -->
<div style="position:relative; height: 100%; padding: 0">
<!-- absolute hidden cell taking up entire space -->
<div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
This text will be displayed on top
<!-- fixed bottom content -->
<div style="position: absolute; bottom: 0">
This text will appear at the bottom of the cell
</div>
<br>
</div>
</div>
</div>
</div>
<div style="display: table-row">
<!-- fixed size bottom row -->
<div class="cell" style="background-color: red; border-top: 2vw solid black;">
<!-- customizable page content -->
<div style="height: 20vw !important;">
foo
</div>
</div>
</div>
</div>
</div>