Xpages OneUI 2.1 lotusColLeft: possible to make height same as lotusContent?

Question

I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.

Answer 1

OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):

.lotusContent {
    background: url(leftColBkgd.png) repeat-y;
}

.lotusColLeft { 
    background-color: grey; 
    position: absolute;
    z-index: 10;
}

.lotusMain .lotusContent {
    padding-left: 230px;
}

---

Original solution:

.lotusColLeft { 
    background-color: grey; 
    min-height:2048px;
    position: absolute;
    z-index: 10;
}

.lotusMain .lotusContent {
    padding-left: 230px;
}

Answer 2

You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).

You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.

Howard