Android - bottom bar covering webpage

Question

I am working on a webpage that will be accessed by both Desktop browsers and mobile browsers.

On most mobile browsers the layout is already correctly positioned at the bottom of the screen, but on some devices (mostly Motorola ones) the toolbar at the bottom covers part of my layout.

How can I detect that I am on a phone with a toolbar like that, so I can use an appropriate margin-bottom to raise my layout above it?

EDIT: Here is a sample of the CSS I'm using the part of the layout that must stick to the bottom. Maybe this will help.

element.style {
    top: auto;
    bottom: 0px;
    max-height: 433px;
    display: block;
}

@media (max-width: 425px) and (min-width: 0px)
screen.css:589
#wrap.dock {
    width: 100%;
}

#wrap.dock {
    box-shadow: 0px 25px 10px 0px rgba(0, 0, 0, 0.5);
    height: 411px;
    overflow: visible !important;
    position: fixed;
    right: 0;
    z-index: 50;
}