CSS高度不工作

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

我想你想'行'的高度被固定爲像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工作。只要刪除，它會工作。

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; 
}