100％的内部滚动框不是视图框

Question

100%对于可滚动容器中的元素计算为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.

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

旧答案

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

实施例

另外applied to your Codepen

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;