Unexplained browser scroll bar when using javascript code inside <div> set to overflow-y:scroll;

Question

I have a webpage that has one <div> with overflow-y:scroll; and for some reason my webpage is showing a vertical scroll bar. When I scroll down the page it's just blank, but it appears to be compensating for the div content because when I scroll to the bottom of the div, the webpage scroll bar disappears.

CSS:

#wrapper {width:1227px; height:400px; overflow-y:scroll;}

HTML:

<div id="wrapper">
<table>
<tr>
<td>
<script>
    // Create the datePicker
    datePickerController.createDatePicker({ 
    // Associate the three text inputs to their date parts                         
    formElements:{\"" . $emp_query['Emp_ID'] . "\":\"%Y-%m-%d\"},
    // Disable the fade effect
    noFadeEffect:true,
    // Show week numbers
    showWeeks:false,
    // Set a statusbar format
    statusFormat:\"%l, %d%S %F %Y\",
    //Highlight Certain days
    highlightDays:[0,0,0,0,0,1,1],
    });
    </script>
</td>
</tr>
<!-- Repeat the above cells many more times -->
</table>
</div>

I don't know if it's meant to do this, but I don't want it to because it just leaves a bunch of blank page below it, is there something I can do?

EDIT: I figured out the problem is caused by a date picker javascript widget that I have within the table. Code updated and here is the link to the widget: DatePicker . I tried to create a fiddle with all of this, but it kept freezing up and the script stopped running. Is this normal when there is a script running inside the <div> like this?

EDIT: To clarify, what I want is to have a <div> with the viewing area limited to 400px high and to get rid of the extra blank space below it. When I remove the Javascript datepicker widget, everything works as it should, but for some reason the Javascript is causing the webpage height accommodate the hidden content of the <div> .

Answer 1

您是否尝试将溢出更改为“隐藏”？

Answer 2

Its having vertical scrollbar because you have asked for y-scrollbar. try sumthing like

#wrapper {width:1227px; height:400px; overflow:auto;}

css & html is sufficient enough to handle an overflow.

Answer 3

将overflow-y设置为auto只会在需要时显示滚动条：

#wrapper { /* ... */ overflow-y: auto; }

Answer 4

Alright, the problem has been solved...by the datepicker developer, Brian McAllister. In the CSS of the datepicker there is a class set for the :link and :visited , here is a snippet:

.date-picker-control:link,.date-picker-control:visited {
display:-moz-inline-stack;
}

When the display is changed to:

.date-picker-control:link,.date-picker-control:visited {
display:-moz-inline-box;
}

The problem goes away. Thanks Brian!