Notes Scroll Bar

scrollHeight, Height, InnerHeight are all producing same value when a scrollbar is showing

by Luke Turnbull

HTML

<div class="mainContent">
    <div class="top"></div>
    <div class="structureContent">
        <div class="wrapper">
            <div class="width100">
                <div class="content">
                    <div class="note">
                        <table class="noteD">
                            <tbody>
                                <tr>
                                    <td width="29%" class="smallHeader">asdasd
                                        <br />asdsadsada
                                        <br />dadada</td>
                                    <td></td>
                                    <td width="10%"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="note">
                        <table class="noteD">
                            <tbody>
                                <tr>
                                    <td width="29%" class="smallHeader">asdasd
                                        <br />asdsadsada
                                        <br />dadada</td>
                                    <td></td>
                                    <td width="10%"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="note">
                        <table class="noteD">
                            <tbody>
                                <tr>
                                    <td width="29%" class="smallHeader">asdasd
                                        <br />asdsadsada
                                        <br />dadada</td>
                                    <td></td>
                                    <td width="10%"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div...

CSS

.top {
    z-index: 2999;
    border-bottom: #a59a94 1px solid;
    position: fixed;
    text-align: center;
    width: 100%;
    overflow: auto;
    right: 0px;
    height: 32px !important;
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
    background-color: #f00;
}
.structureContent {
    z-index: 2998;
    position: fixed;
    text-align: center;
    margin: 0px auto;
    width: 100%;
    overflow: auto;
    right: 0px;
    left: 0px;
    top: 51px;
    bottom: 70px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
}
.wrapper {
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
}
.width100 {
    width: 100% !important;
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
    text-align: left;
}
.footer {
    padding-bottom: 10px !important;
    height: auto !important;
    z-index: 2999;
    position: fixed;
    text-align: center;
    width: 100%;
    bottom: 0px;
    background: #d3d3d3 repeat-x;
    height: 70px;
    overflow: auto;
    border-top: #a59a94 1px solid;
    right: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
    background-color: #ff0;
}
.content {
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 73%;
    bottom: 0px;
    float: left;
    height: 100%;
    top: 0px;
    background-color: #0f0;
}
.divider {
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 12px;
    padding-top: 0px;
    position: relative;
    width: 12px;
    float: left;
    height: 100%;
    overflow: hidden;
   ...

JavaScript

var contentBox;

$(document).ready(function () {
    contentBox = $('.content');
    getValues();
});

function getValues() {
    console.log(contentBox[0].scrollHeight);
    console.log(contentBox[0].clientHeight);
    console.log(contentBox.height());
}