0

display: table-cell スタイルを持つ別の div 内にネストされた div のオーバーフローに問題があります。#left-wrapper の高さを超えると、#left-wrapper のコンテンツがトリミング (非表示) されない理由がわかりません。アドバイスをよろしくお願いします。フィドル リンク: http://jsfiddle.net/bpbHY/1/

ここに私のマークアップがあります:

<div id="wrapper">
    <div id="left">
        <div id="left-wrapper">
            <ul>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item </li>
            <ul>
        </div>
    </div>
    <div id="center">Center content</div>
    <div id="right">right</div>
</div>

CSS:

#wrapper {
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div {
    display:table-cell;
    height:100%;
}
#left {
    width:70px;
    min-width:80px;
    height: 100%;
    background-color:pink;
}

#left-wrapper {
    overflow: hidden;
    height: 100%;
}

#center {
    background-color:green;
    min-width:200px;
}
#right {
    width:50px;
    min-width:50px;
    background-color:red;
}
li {
    line-height: 80px;
}
body, html {
    width:100%;
    height:100%;
}
4

4 に答える 4

1

この問題は、display: table; の使用が原因で発生していると思います。およびテーブルセル

私はあなたが持っている CSS を自由に再設計しました。これがあなたが探しているものだと思います:

Html はそのままで、CSS は次のようになります。

* {margin:0;padding:0;}
html, body{
    height:100%;
    width: 100%;
}
li {
    line-height: 80px;
}
#wrapper{
    width: 100%;
}
#left-wrapper {
    background: pink;
    width: 15%;
    height: 100%;
    float: left;
}
#left-wrapper ul {
    height: 100%;
    overflow: scroll;
    background: pink;
}

#center {
    background-color:green;
    height: 100%;
    width: 70%;
    min-width:200px;
    float: left;
}
#right {
    width: 15%;
    min-width:50px;
    height: 100%;
    background-color:red;
    float: left;
}
于 2013-08-13T10:48:08.527 に答える
1

overflow: hiddenと を使用しているため、 は機能していdisplay: tableませんdisplay: table-cell。また、ポジショニングを使用して #center を中央に配置しました。

ここに作業フィドルがあります

PS:min-width: 200px必要に応じて変更したいものを使用しています。

于 2013-08-13T10:44:36.223 に答える
0

この後、listitems が機能するように設定しoverflow: scroll;ます。

http://jsfiddle.net/bpbHY/8/

于 2013-08-13T09:53:35.203 に答える