set all div in html without vertical scrollbar

Question

I am building Dashboard page which contains graphs(using HighCharts for same). my html also contains jQuery Tabs.

In one tab there are 4 different charts.charts are getting loaded properly but it comes with vertical scroll bar. being a dashboard page i want to hide vertical scroll bar.

Here is My HTML

 <div id="container" style="width:98%;">
        <ul>
            <li><a href="#divP1">Dashboard</a></li>
            <li><a href="#divP2">Network</a></li>
            <li><a href="#divP3">> 24 Hours</a></li>            
        </ul>
        <div id="divP1" style="margin:0 auto;">
            <div id="divDailyUptimeLineChart" style="width:650px;height:250px;float:left;"></div>
            <div style="width:500px;height:250px;margin-left:750px;" id="divUptimeGauge"></div>
            <br />
            <div style="clear:both;width:700px;float:left;" id="divFaultCount"></div>
            <div style="margin-left:700px;" id="divTicketTypeCount"></div>
            <br />            
        </div>      
        <div id="divP2" style="margin:0 auto;">
            <div id="divFaultTicketType" style="width:49%;float:left;" ></div>            
            <div id="divCRATicketType" style="margin-left:49%;width:49%"></div>
        </div>  
        <div id="divP3" style="margin:0 auto;">
            <div id="divTicketTypeTime"></div>
        </div>
    </div>

HighCharts are reneder to divDailyUptimeLineChart divUptimeGauge divFaultCount divTicketTypeCount On first tab

JS :

$('#container').tabs();

I have tried this code in my HighCharts Defination Code : but it didnt worked

chart: {
        renderTo: divID,
        type: 'gauge',
        height: $(document).height()/2,
        width: $(document).width()/2,
        },

Answer 1

给样式overflow-y：隐藏以隐藏垂直滚动条。

Answer 2

Try adding this to the style of each of the divs holding the charts:

overflow-y: hidden;

So for example divDailyUptimeLineChart would be like the following:

<div id="divDailyUptimeLineChart" style="width:650px;height:250px;float:left;overflow-y:hidden;"></div>

Answer 3

Try this code

JS:

$("div").css('overflow-y','hidden');

Internal style:

    div
    {
    overflow: auto; 
    overflow-y: hidden;    
    //For IE8: 
    -ms-overflow-y: hidden;    
    }

For More Info

Answer 4

First of all to hide the overflow of the div you should reduce width of the div and place your content to fit inside.

Else you can use

overflow-y:hidden;

Which will hide the exceeding content.It will be a major drawback when to want to display entire content of div.

Try to adjust the tab container width.So that the tab will not exceed the expected size....

I suggest you to read this to know more about Overflow property.

Answer 5

Probably what are you looking for is overflow property in css... look inside your css file and find something like:

div {
overflow: auto;
}

you want to set overflow property to hidden... For more information look at this link