SLDS Header row with full height left and right div

Question

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

1. the frame does not take into account the first row and thus the page extends below the VH of the page
2. 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

Answer 1

Try with below code can help you.

<aura:application extends="force:slds">   
    <div class=" slds-grid slds-wrap slds-grid--pull-padded">
        <div class=" Myheader slds-p-horizontal--small slds-size--12-of-12">header</div>
        <div class=" MyLeftSide group slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--3-of-12 slds-large-size--3-of-12">left Side   
        </div>
        <div class="MyRightSide group slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--3-of-12 slds-large-size--9-of-12">right Side
        </div>
    </div>
</aura:application>

Apply your own style class to grid system for height and width.

Style :

.THIS .Myheader {
    background-color:Blue;
    height :50px;
}

.THIS .MyLeftSide {
    background-color: Green;
    height :600px;
}

.THIS .MyRightSide {
    background-color: Silver;
    height :700px;
}

Answer 2

I would try like this:

<aura:component description="TestGridLayoutComponent">

<lightning:layout>
    <lightning:layoutItem size="12">

        <lightning:layoutItem size="12" class="MyTopContainer" >
            <h2><b>Top Content</b></h2>
        </lightning:layoutItem>

        <lightning:layout class="page">
            <lightning:layoutItem size="3" class="OtherContainer" >
                <p><b>Left Side</b></p>
            </lightning:layoutItem>

            <lightning:layoutItem size="9" class="OtherContainer" >
                <p><b>Right side</b></p>
            </lightning:layoutItem>
        </lightning:layout>

    </lightning:layoutItem>

</lightning:layout>
</aura:component>

Style:

.THIS .MyTopContainer{
    border: 1px solid #cccccc;
    text-align: center;
    width: 100%;
}

.THIS .OtherContainer {
    border: 1px solid #cccccc;
    padding: 10px;
}

Your result would looks like this. Lightning:layout uses slds-grid to control the layout - you can add additional styles to fit the size constraints for your page height

In Apex:

<apex:page id="TestPage2">
    <apex:includeLightning />
    <apex:slds />

    <style>
        .TopContainer {
            border: 1px solid #cccccc;
        }

        .OtherContainer {
            border: 1px solid #cccccc;
        }
    </style>
    <div class="slds">
        <div class="slds-grid slds-grid--vertical">
            <div class="slds-size_12-of-12">

                <div class="slds-size_12-of-12 slds-text-align--center TopContainer">
                    <h2><b>Top Content</b></h2>
                </div>
                <div class="slds-grid">
                    <div class="slds-size_3-of-12 slds-p-around--small OtherContainer">
                        <p><b>Left Content</b></p>
                    </div>
                    <div class="slds-size_9-of-12  slds-p-around--small OtherContainer">
                        <p><b>Right Content</b></p>
                    </div>

                </div>

            </div>

        </div>
    </div>

</apex:page>

Your Result: