How to style the quick launch bar div to extend to the length of the page? (SP2013)

Question

We want the quick launch bar to extend to the height of the page. At the moment there are little contents in the quick launch and as the contents increase the height of it increases. We want to always set fixed min height of the quick launch bar equal to the height of the page.

What div do I target?

If we use height:100% on the

 <div class="ms-core-sideNavBox-removeLeftMargin"  style="background-color:red;height:100%;">

That does not help..

Answer 1

1. Use CSS to create 2 column equal height (Ex. http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm) This would require changes to your master page (restructure the sidebar and main content area).

2. A jQuery plugin called equalHeights may be the solution you're looking for.

Be aware that SharePoint 2010/2013 may resize the div#s4-workspace after your equal heights script fires if you're not careful. Best to avoid the DOMReady event and instead insert your logic into into the array of handlers used by SharePoint when the workspace is resized.

function myEqualHeights() {
    // do something here
}
ExecuteOrDelayUntilScriptLoaded(
    function () {
        SP.UI.Workspace.add_resized(
            myEqualHeights
        );
    },
    "init.js"
);

This assumes that jQuery is loaded in the HEAD already.

Answer 2

See if the below CSS helps, works for me:

body #s4-bodyContainer,
body #contentRow,
body #sideNavBox
{
    height: 100%;
}
body #contentRow
{
    display: table;
}
body #sideNavBox,
body #contentBox
{
    display: table-cell;
    vertical-align: top;
}
body #sideNavBox
{
    float: none;
    left: 20px;
    position: relative;
}
body #sideNavBox .ms-core-sideNavBox-removeLeftMargin
{
    margin-left: 0;
}
body #contentBox
{
    padding-left: 40px;
}

Answer 3

Use this in you css

#contentRow {
    overflow:auto;
}