3

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..

  • if this doesn't work is because is inside another div. Just for test try to write a px height and see what happening – Salvatore Di Fazio Apr 3 '14 at 11:20
  • yes it takes px – variable Apr 3 '14 at 11:22
  • for parent also same case. it doesnot seem to understand the 100%... Neither can i give min height to the content box as this will effect the modals also – variable Apr 3 '14 at 11:23
  • use jquery, add a custom class to that div and set a min-height on that class. That should resolve – Salvatore Di Fazio Apr 3 '14 at 12:29
2
  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.

0

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;
}
-1

Use this in you css

#contentRow {
    overflow:auto;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.