如何獲得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%; 
    } 
}