Div 使用剩余宽度

Question

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

智能管理员：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，将 display:table 单元格用于 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
}

显示table:

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

Div 使用剩余宽度

Div using remaining width

css

smartadmin