38

以下のコードに従って、HTML、CSSを設定しています。コードの動作を確認する方がはるかに便利なため、JSFiddleリンクも追加しました。

私が抱えている問題は、#inner-rightdiv内のdivに多くのテキストがある場合、スクロールバーをにのみ#right-col表示したいということです。私の現在のコードは2つのスクロールバーを示しています：と。外側のスクロールバーを削除するようにCSSをに変更すると、内側のスクロールバーも消え、ルールが尊重されなくなります。#inner-right #inner-div#right-col#right-coloverflow: hidden#inner-rightmax-height

#inner-right内容が大きくなりすぎた場合にのみスクロールバーが表示されるように設定するにはどうすればよいですか。

JSFiddle

html, body {
    height: 100%;    
}
#wrapper {
    height: 100%;
    display: table;
    width: 700px;
}
#header, #footer {
    display: table-row;
    height: 30px;
}
#body {
    height: 100%;
    display: table-row;
    background: rgba(255, 0, 0, 0.5);
}
#left-col, #right-col {
    display: inline-block;
    width: 320px;
    height: 100%;
    max-height: 100%;
    margin-right: 20px;
    border: 2px black solid;
    vertical-align: top;
    padding: 3px;
    overflow: auto;    
}
#inner-right {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background: ivory;
}
<div id="wrapper">
    <div id="header">Header</div>
    <div id="body">
        <div id="left-col">
            Lorem ipsum ... little text
        </div>
        <div id="right-col">
            <div id="header-text">Header</div>
            <div id="inner-right">
            Lorem ipsum ...lots of text
            </div>
        </div>
    </div>
    <div id="footer">Footer</div>
</div>

4

4 に答える 4

76

あなたが作るなら

overflow: hidden外側のdivとoverflow-y: scroll内側のdivで機能します。

http://jsfiddle.net/C8MuZ/11/

于 2013-03-26T08:21:49.017 に答える
6

これは問題なく機能します。高さを目的のピクセルに設定します

#inner-right{
            height: 100px;
            overflow:auto;
            }
于 2016-06-04T07:53:39.130 に答える
2

これを設定します：

#inner-right {
    height: 100%;
    max-height: 96%;//change here
    overflow: auto;
    background: ivory;
}

これはあなたの問題を解決します。

于 2013-03-26T08:20:13.893 に答える
1

これにはJavaScriptまたはjqueryを使用する方が簡単な場合があります。ヘッダーとフッターの高さが200であるとすると、コードは次のようになります。

function SetHeight(){
    var h = $(window).height();
    $("#inner-right").height(h-200);    
}

$(document).ready(SetHeight);
$(window).resize(SetHeight);
于 2014-08-02T09:06:01.540 に答える