0

次のように動作する必要があるコンテンツ領域があります。

  • 垂直方向のオーバーフローがない場合、コンテンツは垂直方向の中央に配置されます (現在は を介し​​て達成されdisplay:table/-cellます) 。
  • 垂直オーバーフローがない限り、スクロールバーは表示されません
  • 含まれている div の高さは変更されません

私は最初の点しか満たすことができませんでした-フィドル:

http://jsfiddle.net/PTSkR/125/

これが私のhtmlです： 

<div class="row-fluid card-box">

    <div class="span4 side-study-box">
        <div class="side-box-content">
            <pre class="text-content-saved">TEST 
           TEST</pre>
            </div>
        </div>
</div>

CSS: 

.side-study-box {
    background-color: white;
    color: black;
    border: 1px solid #3D6AA2;
    text-align: center;
    height: 160px;
    max-height: 160px;
    display: table ;
    margin: 0px ;
    margin-left: -1px;
    position: relative;
    overflow-y: scroll ;
}

    .side-study-box .side-box-content {
        width: calc(100%);
        height: 160px;
        float: right;
        display: table;
        overflow-y: scroll ;
        background-color: white;
    }

    /*#region CONTENT AREAS */

    /*#region TEXT CONTENT */
    .side-study-box .text-content-saved {
        width: calc(100%+29px);
        font-size: 24px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 160px !important;
        max-height: 160px ;
        background-color: white;
        padding: 0px ;
        margin: 0px ;
        border: 0px ;
        overflow-y: scroll;
    }

残念ながら、ソリューションの一部として js を使用することはできません... これは css だけで可能ですか?

4

1 に答える 1

0

を使用 overflow:auto;して 2 番目のポイントを達成し、次のように設定できます。

単語区切り: 通常 !重要; ワードラップ: 通常!重要; 空白: pre !important;

フィドル: http://jsfiddle.net/PTSkR/134/

タグを使用しているためpre、すべての空白と改行の書式設定がカウントされるため、空白や余分な行がオーバーフローを引き起こし、それを見逃す可能性があることに注意してください。こちらをご覧ください

于 2013-06-07T02:37:16.757 に答える