html - Css 表格单元格规则和自动宽度溢出

Question

我在使用 display: table 和 display: table-cell 时遇到问题。

费德利:http://jsfiddle.net/5q51sbqb/1/

我有一个带有 display:table 的 div；在这两个带有 display:table-cell 的 div 中；

左边的 div (.t1) 是固定宽度，右边的 div(.t2) 应该占据容器边缘的剩余空间。

我的问题在于将长 div (2000px) 添加到右侧的 div(.t2)。我基本上需要内容窗口与其父级保持相同的宽度，而不会超出容器的范围，以允许滚动其中的内容。

请记住，这需要在不使用固定宽度的情况下进行，因为容器和 t2 都是响应式的。而且我还必须使用表格和表格单元显示属性:(

所以基本上，当我需要 .t2 div 的子项适合容器宽度时，它们会超出容器(没有在内容窗口上设置固定宽度...和 ​​.t2 div)

我很难过。

HTML

        </div>
    </div>
    <div class="table-cell t2">
        <div id="content-window">
            <div id="content"></div>
        </div>
   </div>
</div>
</div>

CSS

#container{
   width: 600px;
   height: 600px;
   margin: 0px auto;
   background-color:green;
   padding: 2px;
}

#table{
   display:table;
   width:100%;
}

.table-cell{
   display:table-cell;
   height: 300px;
   padding:2px;
}

.t1{
   width: 100px;
   background-color: red;
}
.t2{
   width:auto;
   background-color: blue;
}

#content-window{
   width:100%;
   overflow:scroll;
}

#content{
   width: 2000px;
   height: 50px;
   background-color:yellow;
}

Answer 1

由于您巧妙地创建了一个#content-window，将它设置为一个position: absolute;，这样它就不会弄乱单元格的自动宽度。只需记住将 .t2 设置为 position: relative，这样 #content-window 可能会用宽度和高度填充它，使用右侧表格单元格的包含空间。

提示:如果您希望它只水平滚动，请使用overflow-x。

#container{
    width: 600px;
    height: 600px;
    margin: 0px auto;
    background-color:green;
    padding: 2px;
}

#table {
    display:table;
    width:100%;
}

.table-cell{
    display:table-cell;
    height: 300px;
    padding:2px;
}

.t1 {
    width: 100px;
     background-color: red;
}
.t2 {
    position: relative;
    background-color: blue;
}

#content-window{
    position: absolute;
    width:100%;
    height: 100%;
    overflow: hidden;
    overflow-x: scroll;
    height:50px;
}

#content{
    width: 2000px;
    height: 50px;
    background-color:yellow;
}

在这里查看:http://jsfiddle.net/5q51sbqb/4/