【问题标题】：How to get CSS table-cell to 100% for responsive design [closed]如何将 CSS 表格单元格设置为 100% 以进行响应式设计 [关闭]
【发布时间】：2014-10-02 14:18:15
【问题描述】：

如何使用 CSS 进行以下设置？

jsfiddle

http://jsfiddle.net/16ex38mL/2/

基本上，我打算在#header-nav-content-search 中放置一个输入框，并让 div 及其下方的 div 响应调整为剩余宽度的 100%。我有两个静态宽度列。一个是第一个240px，一个是最后一个200px。

代码

#header-nav-content-search {
  width: 100%;
}

没有成功。

【问题讨论】：

有史以来最好的图画：P
powered by microsoft journal :D ... 边界应该是即使。

标签： css responsive-design multiple-columns css-tables

【解决方案1】：

我专注于减少所需的 HTML 标记。下面的例子主要是基于你那幅出色的草图，所以它需要一些调整。

基本思路

创建一个三“列”的 CSS 表格，其中中心单元格剩余流体：

<div class="table">
    <div class="cell"></div>
    <div class="cell center">I contain 4 fluid divs with the class ".inner"</div>
    <div class="cell"></div>
</div>

中心单元格包含您的 4 个内框，其类为 .inner

基本 CSS 样式

box-sizing: border-box 将允许我们计算百分比宽度，包括填充和边框
主容器.table 具有固定高度（可以更改为百分比）
.inner div 是 display: inline-block，并被赋予适当的百分比宽度和等于容器高度一半的固定高度
左右两列的宽度固定
.table 被赋予适当的最小宽度以防止内部 div 重叠

注意： 在 HTML 标记中，内部 div 的结束和开始标签之间没有空格。这很重要，因为它可以防止内联元素出现间隙。

参考this article for more information.

CSS / HTML / 演示

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
}
.table {
  display: table;
  height: 300px;
  width: 100%;
  min-width: 600px;
  table-layout: fixed;
}
.cell {
  display: table-cell;
  vertical-align: top;
}
.left {
  width: 240px;
}
.right {
  width: 200px;
  border-left: solid 1px #000;
}
.inner {
  display: inline-block;
  height: 150px;
  vertical-align: top;
}
.center-left {
  width: 30%;
}
.center-right {
  width: 70%;
}
/* Borders */

.table {
  border: solid 1px #000;
}
.inner {
  border-bottom: solid 1px #000;
  border-left: solid 1px #000;
}
.center-right .inner {
  border-right: solid 1px #000;
}
.inner:nth-child(3),
.inner:nth-child(4) {
  border-bottom: none;
}

<div class="table">
  <div class="cell left">
    240px width
  </div>
  
  <div class="cell center">
    <div class="inner center-left">
      30% width 50% height
    </div><div class="inner center-right">
      70% width 50% height
    </div><div class="inner center-left">
      30% width 50% height
    </div><div class="inner center-right">
      70% width 50% height
    </div>
  </div>
  
  <div class="cell right">
    200px width
  </div>
</div>

【讨论】：

完美答案。我怎样才能让内左不流动，但与它们的内容一样宽？

【解决方案2】：

我不会那样做。这是帮助您入门的一种方法。

演示：http://jsbin.com/faveca/1/

http://jsbin.com/faveca/1/edit

HTML：

 <header>
    
  <div class="fixed-width-240 eq">
    240px column fixed width what about is it equal to the others, yes it is.
   </div>
        
   <div class="fluid eq">
     fluid column
   </div>
    
    <div class="fixed-width-200 eq">
      200px column
    </div>

  </header>

CSS

body,
html {
    margin: 0;
    padding: 0;
}
header div,
header div:before,
header div:after {
    box-sizing: border-box
}
header {
    border: 2px solid #000
}
header:after {
    content: "";
    display: table;
    clear: both;
}
.fixed-width-240 {
    z-index: 1;
    position: relative;
    background: red;
}
.fixed-width-200 {
    z-index: 2;
    position: relative;
    background: orange;
}
.fluid {
    position: relative;
    z-index: -1;
    background: #ccc;
}
@media (min-width:700px) { 
    header {
        overflow: hidden
    }
    header .eq {
        padding-bottom: 99999px;
        margin-bottom: -99999px;
    }
    .fixed-width-240,
    .fixed-width-200 {
        float: left
    }
    .fixed-width-240 {
        width: 240px;
        width: 240px;
        margin-right: -240px;
        border-right: 2px solid #000;
    }
    .fixed-width-200 {
        float: right;
        z-index: 2;
        width: 200px;
        margin-left: -200px;
        border-left: 2px solid #000;
    }
    .fluid {
        float: left;
        padding: 0 220px 0 260px;
        width: 100%;
    }
}

【讨论】：