Dhtmlx content height not set properly

Discontinued products Uncategorized discussions
#1

Hi,

I have a problem using dhtmlx components.
Altough I have a body height of 100%, the content exceeds the window by the size of the menu I have on the top.

800×532 8.97 KB

instead of behing inside the windows like this :
800×532 8.97 KB

I looks like Dhtmlx doesn’t consider the menu’s height when it sets the scheduler height.

Do you have an idea of what is wrong ?

Here is the HTML but if you need anything else just tell me

<div id="main_menu" style='height:50px;'>
    <nav class="navbar navbar-default" role="navigation">
                <!-- Menu stuff  -->
    </nav>
</div>
    <div id="main_content">
        <div id="planning" style='width:100%; height:100%;'>
            <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%; position:relative;'>
                <div class="dhx_cal_navline">
                    <div class="dhx_cal_prev_button">&nbsp;</div>
                    <div class="dhx_cal_next_button">&nbsp;</div>
                    <div class="dhx_cal_today_button"></div>
                    <div class="dhx_cal_date"></div>
                    <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>
                    <div class="btn btn-xs btn-print">
                        <span onclick="scheduler.toPDF('http://dhtmlxscheduler.appspot.com/export/pdf')"class="glyphicon glyphicon-print" style="font-size: 20px;"/>
                    </div>
                    <div class="dhx_cal_tab" name="day_tab" style="right:144px;"></div>
                    <div class="dhx_cal_tab" name="week_tab" style="right:180px;"></div>
                </div>
                <div class="dhx_cal_header">
                </div>
                <div class="dhx_cal_data">
                </div>
            </div>
    </div>
</body>

Thanks you

#2

The height as 100% means the same height as the window. This is how the height works for any html element. So in your case it really will not take the height of the menu in account.

In case of scheduler you can use

scheduler.xy.margin_top = 50;//height of menu
#3

Thank you for your answer.

Indeed, I had a misunderstanding of the height property.
Based on this post :http://stackoverflow.com/questions/5059021/css-html-div-height-fill-remaining-space,
I found how to do it.

Thanks again