Question

我遇到了嵌套在另一个div中的div溢出的问题，该div有display：table-cell style。我不确定为什么来自＃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%;
}

Answer 1

overflow: hidden无效，因为您使用的是display: table和display: table-cell。我还使用了定位来使#center居中。

以下是working fiddle

PS：我正在使用min-width: 200px您可能需要根据需要进行更改。

Answer 2

我认为这个问题正在发生，因为你使用了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;
}

Answer 3

我不确定，但也许这对你有用：

li {
line-height: 80px;
overflow: hidden;
width: 100%;
height: 80px;
}

jsfiddle

Answer 4

在此之后，将listitems设置为overflow: scroll;它应该有效。

<强> http://jsfiddle.net/bpbHY/8/

css - overflow：隐藏在div嵌套在display：table-cell中

4 个答案: