html - 100% 的内部滚动框不是 View 框

Question

100% 可滚动容器中的元素计算为 View 框的 100% 而不是实际大小。

你可以看到问题in this Codepen并在以下代码段中:

#container {
  max-width: 25em;
  background: #181818;
  overflow-x: auto;
}
#container #main td {
  background: #646464;
  white-space: nowrap;
  height: 5em;
}
#container #bottom {
  position: releative;
  width: 100%;
  height: 2em;
  background: #cdc;
}
#container #bottom span:first-child {
  float: left;
}
#container #bottom span:last-child {
  float: right;
}

<div id="container">
  <table id="main">
    <tbody>
      <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
        <td>4444444</td>
        <td>5555555</td>
        <td>6666666</td>
        <td>7777777</td>
        <td>8888888</td>
        <td>9999999</td>
      </tr>
    </tbody>
  </table>
  <div id="bottom">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>

我想要这个:

编辑:
真正的问题是关于 Kendo grid，所以我无法更改它的模板。

Answer 1

不修改HTML

我认为最简单的解决方案是删除 #bottom 宽度并使用 Javascript 检索 #main 的宽度并将其应用于 #bottom

Javascript

//Create "tableWidth" variable from width of #main
var tableWidth = document.getElementById('main').offsetWidth;

//Set width of #bottom
document.getElementById('bottom').style.width = tableWidth+'px';

结果

示例演示

还有 applied to your Codepen.

//Create "tableWidth" variable from width of #main
var tableWidth = document.getElementById('main').offsetWidth;

//Set width of #bottom
document.getElementById('bottom').style.width = tableWidth+'px';

#container {
  max-width: 25em;
  background: #181818;
  overflow-x: auto;
}
#container #main td {
  background: #646464;
  white-space: nowrap;
  height: 5em;
}
#container #bottom {
  position: releative;
  height: 2em;
  background: #cdc;
}
#container #bottom span:first-child {
  float: left;
}
#container #bottom span:last-child {
  float: right;
}

<div id="container">
  <table id="main">
    <tbody>
      <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
        <td>4444444</td>
        <td>5555555</td>
        <td>6666666</td>
        <td>7777777</td>
        <td>8888888</td>
        <td>9999999</td>
      </tr>
    </tbody>
  </table>
  <div id="bottom">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>

旧答案

将 span 放在具有 colspan="9" 且样式为 tfoot td 的 tfoot td 中。将现有的 td 属性应用于 tbody td。

例子

还有 applied to your Codepen

#container {
  max-width: 25em;
  background: #181818;
  overflow-x: auto;
}
#container #main tbody td {
  background: #646464;
  white-space: nowrap;
  height: 5em;
}
tfoot td {
  height: 2em;
  background: #cdc;
}
tfoot span:first-child {
  float: left;
}
tfoot span:last-child {
  float: right;
}

<div id="container">
  <table id="main">
    <tbody>
      <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
        <td>4444444</td>
        <td>5555555</td>
        <td>6666666</td>
        <td>7777777</td>
        <td>8888888</td>
        <td>9999999</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="9">
          <span>0%</span>
          <span>100%</span>
        </td>
      </tr>
    </tfoot>
  </table>
</div>