Jquery 基于CSS表的布局行未扩展100%宽度

我想将基于css表的行的宽度扩展到100%的浏览器宽度，而不破坏其余内容的布局。请注意，即使绿色标题栏已设置为100%宽度，它也没有延伸全宽

我的代码可以在这里找到：

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,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>

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

到标题行

但我希望看到一种替代解决方案，它不会绝对定位子元素。

尝试以下方法：

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>

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

我希望这有帮助

变化：

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

致：

编辑更改。返回并添加：

.header{
    display:table;
}

---

就在它之后

您的问题是因为我们无法用css模拟

colspan

。由于一行位于包含两个单元格的另一行之上，因此该标题行应该是

colspan=“2”

。但由于这是不可能的，您的选择是：

改变你的结构

如果你想保持现在的结构，你唯一的选择就是设置 您的

.header

，使用

显示：表格标题和
标题侧：顶部如下例所示：

CSS:

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

---

我的建议如下

在这种情况下，确实不需要对任何元素进行绝对定位

在本例中，我们有两个水平块（.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>

试验

行高于100%
下一行--最大宽度62.5em
试验

试验

在这里创建的小提琴：

---

它似乎正在向MEADED位置工作：行的绝对值，但如果可能的话，希望看到一些替代方法。将相关代码放在问题本身中。请尽量更好地解释您的问题。我清楚地说，请扩展基于表格的行的宽度。基于表格的行是：display:table row，这个问题让人困惑的是什么？OP说他们想要的是替代品。header absolute然后这会破坏行的完整高度？请注意，红色和蓝色的列不再是100%高度。你会推荐什么结构@LGVentura？@AntonB我建议你这种结构适合完美的宽度100%和高度100%

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