如何获得CSS表格到100％的响应式设计

Question

如何获得以下设置与CSS工作？

的jsfiddle

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

基本上，我打算把一个输入框＃头-NAV-内容的搜索，让div和它下面的一个响应调整为100剩余宽度的百分比。 我有两个静态宽度列。一个是240px的第一个，一个是200px的最后一个。

代码

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

没有做的伎俩。

Answer 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>

Answer 2

我不会那样做。这是一个让你开始的方法。

DEMO：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%; 
    } 
}