基于CSS表格的布局行未扩展100％宽度

我想将基于行的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

 
 
 
 test 
 
 
 
 
 test 
 
 
 test 
 
  

UPDATE

添加

 position:absolute; 

到标题行。

但是我希望看到一个不能绝对定位子元素的替代解决方案。

Answer 1

你的问题是因为我们不能用css模拟colspan 。 由于您在包含两个单元格的另一行上方有一行，因此该标题行应该是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

变化：

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

至：

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

编辑更改。返回并添加：

 .header{ display:table; } 

直接在它之后

Answer 3

试试这个：

HTML

  
 
 
 test 
 
 
 
 
 test 
 
 
 test 
 
  

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 4

我的建议如下。

在这种情况下，确实没有必要对任何元素进行绝对定位。

在这个例子中，我们有两个水平块（.row）。 第一个宽度为100％，第二个宽度为最大宽度（62.5rem / 1000px）。

我使用Foundation很多，所以我保留了命名约定; 虽然这些是骨头，但在这个例子中并不需要框架。

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; } 

标记

 
 
 
test
 
 
 
 
 
Row above 100%
 
Row below -- max-width 62.5em
 
 
 
 
test
 
 
 
test
 
 
 
 
  

小提琴在这里创建： http ： //jsfiddle.net/squashriddle/y9kT9/