1

これが私のプロジェクトのテスト例です: http://jsfiddle.net/g6aAd/6/

タブのコンテンツが非常に長い場合、Internet Explorer 10 でブラウザーのスクロールが機能しません。

修正方法を教えてください。

CSS

* {
    margin: 0; 
    padding: 0;
}

head, body {
    height: 100%;
}

body {
    background: #fff;
}

#main {
    background: #888; 
    position: absolute; 
    top: 25px; 
    bottom: 0px; 
    width: 100%;
}

#head {
    background: #f8f; 
    position: absolute; 
    width: 100%; 
    height: 25px;
}

#left {
    background: #ff8;
    position: absolute;
    bottom: 0px;
    width: 250px;
    height: 100%; 
}

#right {
    background: #8f8;
    margin-left: 250px; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100% !important; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

@media (max-width: 767px) {
    body {
        padding-left: 0px !important;
    }
}

.tab-content .well {
    margin-bottom: 0px;
}

HTML

<div id='head'></div>
<div id='main'>
    <div id='left'></div>
    <div id='right'>
        <table style="height:100%;width:100%">
            <tr>
                <td style="width:100%;">
                    <ul class="nav nav-tabs" >
                        <li class="active" style="cursor: pointer;">
                            <a>Tab #1</a>
                        </li>
                        <li style="cursor: pointer;">
                            <a>Tab #2</a>
                        </li>
                        <li style="cursor: pointer;">
                            <a>Tab #3</a>
                        </li>
                        <li style="cursor: pointer;">
                            <a>Tab #4</a>
                        </li>
                        <li style="cursor: pointer;">
                            <a>Tab #5</a>
                        </li>
                        <li style="cursor: pointer;">
                            <a>Tab #6</a>
                        </li>
                        <li style="cursor: pointer;">
                            <a>Tab #7</a>
                        </li>
                    </ul>
                </td>
            </tr>
            <tr style="height:100%">
                <td style="height:100%;vertical-align:top;">
                    <div class="tab-content" style="overflow: visible;height:calc(100% - 58px);">
                        <div class="tab-pane active" style="height: 100%; overflow: hidden;">
                            <div class="well" style="height: 100%;">
                                <h1>
                                    These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. 
                                    <br />
                                    <br />
                                    But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned 
                                    <br />
                                    <br />
                                    These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. 
                                    <br />
                                    <br />
                                    But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned 
                                    <br />
                                    <br />
                                    These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. 
                                    But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned 
                                    <br />
                                    <br />
                                </h1>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
4

1 に答える 1