Question

我正在使用SmartAdmin。我有一个使用左标签的小部件。在右侧，我试图让DataTables表占用剩余宽度的100％。目前，该表占据父div的100％宽度，位于左侧选项卡下方。

SmartAdmin：http://192.241.236.31/themes/preview/smartadmin/1.5/ajaxversion/#ajax/dashboard.html

Must
Enter
Code
For JSFiddle Link

Answer 1

您可以将display：table用于parent，并显示：table-cell for children，如下所示：

.widget-body {
    display: table;
    width: 100%;
}

.widget-body .tabs-left {
    display: table-cell;
}

.widget-body .dataTables_wrapper {
    display: table-cell;
    vertical-align: top;
}

更新了JS Fiddle：

http://jsfiddle.net/xq9mpom6/2/

Answer 2

这看起来像是一个需要在一个区域中有多个列的漂亮切割和干燥的情况。对于纯CSS解决方案，您有很多选择。

给出以下标记：

<div class='wrapper'>
    <div class='tabs-left'>
        [...]
    </div>
    <div class='data-table'>
        [...]
    </div>
</div>

浮点数的百分比宽度：

.tabs-left {
   width: 10%;
   min-width: 200px;
   float: left;
}
.data-table {
   width: 90%;
   min-width: 720px; // Arbitrary width. Should min-width of parent minus min-width of the left tabs
   float: left;
}

浮点数的固定和百分比宽度：

.tabs-left {
   width: 200px;
   float: left;
}
.data-table {
   width: calc(100% - 200px);
   min-width: 720px;
   float: left;
}

Flexbox（需要供应商前缀）：

.wrapper { 
   display: flex;
   flex-flow: row;
}
.tabs-left {
   width: 200px;
}
.data-table {
   flex-grow 1
}

显示表格：

.wrapper { 
   display: table;
   width: 100%;
}
.tabs-left {
   display: table-cell;
   width: 200px;
}
.data-table {
   display: table-cell;
}

Div使用剩余宽度

2 个答案: