基於CSS表格的佈局行未擴展100％寬度

Question

我想將基於css表格的行的寬度擴展爲100％的瀏覽器寬度，而不會破壞其餘內容的佈局。請注意，即使綠色標題欄已設置爲100％寬度，它仍未擴展爲全角。

我的代碼可以在這裏找到： http://codepen.io/anon/pen/HfnFv

CSS

html,body{ 
    overflow:visible; 
    height:100%;padding:0;margin:0; 
} 
.header{background:green;position:absolute;} 
.table{ 
    display:table; 
    width:100%; 
    position:relative; 
    min-height:100%; 
} 
.trow{ 
    display:table-row; 
    width:100%; 
} 
.left{ 
    width:30%; 
    height:100%; 
    background-color:#990000; 
    color:#efefef; 
    display:table-cell; 
} 
.left p{ 
    margin:100px 0; 
} 
.right{ 
    width:70%; 
    height:100%; 
    background-color:blue; 
    color:#efefef; 
    display:table-cell; 
} 

HTML

<div class="table"> 
<div class="trow header"> 
<p> 
test 
</p> 
</div> 
<div class="trow"> 
<div class="left"> 
<p> 
test 
</p> 
</div> 
<div class="right"> 
test 
</div> 
</div> 
</div> 

UPDATE

增加

position:absolute; 

標題行。

但我很想看到一個替代解決方案，它不會絕對定位子元素。

Answer 1

你的問題，因爲我們不能模擬colspan與CSS。由於你在另一行上面有一行包含兩個單元格，所以這個標題行應該是colspan="2"。但是，因爲這是不可能的，你的選擇是：

1. 改變你的結構。
2. 如果你想要讓你的結構，因爲它是現在唯一的選擇設置 您.header，使用display:table-caption;和caption-side:top;如下面的例子：

CSS：

.trow.header{ 
    width:100%; 
    display:table-caption; 
    caption-side:top; 
    background:green; 
} 

我做了一個演示用自己的例子：

http://jsfiddle.net/3JQcb/

Answer 2

試試這個：

HTML

<div class="table"> 
    <div class="trow header"> 
    <p> 
    test 
    </p> 
    </div> 
    <div class="trow"> 
    <div class="left"> 
    <p> 
    test 
    </p> 
    </div> 
    <div class="right"> 
    test 
    </div> 
    </div> 
    </div> 

CSS

html,body{ 
overflow:visible; 
height:100%;padding:0;margin:0; 
} 
.header{background:green;position:absolute;} 
.table{ 
    display:table; 
    width:100%; 
    position:relative; 
    min-height:100%; 
} 
.trow{ 
    display:table-row; 
    width:100%; 
} 
.left{ 
    width:30%; 
    height:100%; 
    background-color:#990000; 
    color:#efefef; 
    display:table-cell; 
} 
.left p{ 
    margin:100px 0; 
} 
.right{ 
    width:70%; 
    height:100%; 
    background-color:blue; 
    color:#efefef; 
    display:table-cell; 
} 

我希望這有助於！

Answer 3

變化：

.trow{ 
    display:table-row; 
    width:100%; 
} 

要：

.trow{ 
    display:table; 
    width:100%; 
} 

編輯變化.trow返回並添加：

.header{ 
    display:table; 
} 

直接後

Answer 4

我的建議將是以下內容。

在這種情況下，確實沒有必要對任何元素進行絕對定位。

在這個例子中，我們有兩個水平方塊（.row）。第一個寬度爲100％，第二個寬度爲（62.5rem/1000px）。

我使用基礎相當多，所以我保留了命名約定;儘管這些是骨架，並且在這個例子中框架不是必需的。

CSS

html, body { 
    height: 100%; } 

body { 
    padding: 0; 
    margin: 0; 
    position: relative; 
    font-size: 100%; 
} 

.row { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0; 
    margin-bottom: 0; 
    max-width: 62.5rem; 
} 
    .row p { 
    padding: 1rem; 
    } 

.column, 
.columns { 
    padding-left: 0.9375rem; 
    padding-right: 0.9375rem; 
    width: 100%; 
    float: left; 
} 

.row.max-width { 
    width: 100%; 
    max-width: 100%; 
} 
    .row.max-width .columns { 
    padding-left: 0; 
    padding-right:0; 
    } 

.header{background:green;} 

.table{ 
    display:table; 
    width:100%; 
} 
    .table p { 
    padding: 1rem; 
    } 
.trow{ 
    display:table; 
    width:100%; 
} 

.left{ 
    width:30%; 
    background-color:#990000; 
    color:#efefef; 
    display:table-cell; 
} 

.right{ 
    width:70%; 
    background-color:blue; 
    color:#efefef; 
    display:table-cell; 
} 

標記

<div class="row max-width"> 
    <div class="trow header"> 
    <p>test</p> 
    </div> 
</div> 

<div class="row"> 
    <div class="large-12 columns"> 
    <h1>Row above 100%</h1> 
    <h2>Row below -- max-width 62.5em</h2> 
    <div class="table"> 
    <div class="trow"> 
     <div class="left"> 
     <p>test</p> 
     </div> 

     <div class="right"> 
     <p>test</p> 
     </div> 

    </div> 
    </div> 
    </div> 
</div> 

小提琴在這裏創造： http://jsfiddle.net/squashriddle/y9kT9/