Trying to use the grid system to do something similar to the following:
=================================HEADER ROW Size 1 of 1===========================
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ 3 of 12 + + 9 of 12 +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
==============================BOTTOM OF PAGE WITHOUT SCROLL=======================
I can almost get there are a few issues
- the frame does not take into account the first row and thus the page extends below the VH of the page
- The columns either don't wrap or center on the page depending on what I do
an example of what I am trying
<div class="slds-grid slds-grid_frame slds-grid_vertical-stretch slds-wrap">
<div class="slds-size_1-of-1">
...HEADER STUFF
</div>
<div class="slds-size_1-of-1 slds-grid slds-grid_vertical-stretch slds-wrap" >
<div class="slds-size_3-of-12 slds-border--right">
....LEFT SIDE
</div>
<div class="slds-size_9-of-12 slds-border--right">
....RIGHT SIDE
</div>
</div>
</div>
Which is almost right except the header row takes up a lot more space than it should. It should be normal height and not half the page
If I add slds-grid_vertical
to the main div the bottom section comes up but does not stretch the remaining page height