基于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/