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>

更新

加

position:absolute;

到标题行。

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

Answer 1

更改：

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

要：

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

编辑更改。返回并添加：

.header{
    display:table;
}

之后直接

Answer 2

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

试试这个：

<强> 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 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/

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

4 个答案: