Question

我有这个CSS代码：

.dashboard_wrap {
    display:table;
    min-width:100%;
    height:10px;
}
.dashboard_items {
    display:table-row;
    height:10px;
}
.dashboard_items div{
    display:table-cell;
    border:1px solid #F36F25;
    padding:10px;
    height:10px;
    overflow-y:scroll;
}
@media all and (max-width: 1300px) {
    div.dashboard_items div {
        width: 100%;
        display:block;
    }
}

但身高不高

JSFIDDLE在这里：http://jsfiddle.net/rN6fu/

Answer 1

我想你想要＆＃39;行的高度。固定到类似10px的东西，然后让每个单元格中的项目可滚动。您无法使用HTML表格执行此操作，并且无法将设置为display: table-cell的项目执行此操作。

浮动救援：

.dashboard_items div {
    box-sizing: border-box; /* keep the borders from breaking 100% */
    border:1px solid #236FF5;
    display: block;
    float: left;
    padding: 10px;
    height: 10px;
    overflow-y:scroll; 
}

在此 FIDDLE 中，我将高度设置为40，以便您可以更轻松地查看滚动。即使在10px，您也可以使用鼠标滚轮或等效滚动。

或者，您可以将另一个元素放在.dashboard_items div中，并将该元素设置为display: block和overflow-y: scroll。

Answer 2

您的height正在运作。只需删除padding:10px即可。

DEMO

.dashboard_items div{
    display:table-cell;
    border:1px solid #F36F25;
    height:10px;
    overflow-y:scroll;
}

DEMO2

.dashboard_items div{
    display:table-cell;
    border:1px solid #F36F25;
    height:18px;
    padding:0px 10px 0px 10px;
    overflow-y:scroll;
}

编辑2

DEMO3

.dashboard_items div{
    display:table-cell;
    border:1px solid #F36F25;
    height:auto;
    padding:0px 10px 0px 10px;
    overflow-y:scroll;
}

CSS高度不起作用

2 个答案: