如何使 div 适应所有可用宽度，甚至隐藏滚动？答案

【问题标题】：How to make a div to fit all available width even hidden with scroll?如何使 div 适应所有可用宽度，甚至隐藏滚动？
【发布时间】：2017-04-12 09:38:27
【问题描述】：

我有一个包含两个面板的页面。第二个面板包含一些大表格，因此即使包含包装的内容，它也无法在全宽窗口上显示。比我添加了一个水平滚动来解决这个问题，但似乎 div 不想适应大表大小。

Fiddle link

经过一些研究，我发现如何通过这个 css 更改强制第二个面板适应表格大小：

.pane {
  display: table;
}

updated fiddle link

但是还有另一个问题。第一和第二面板的宽度不同。即使第一个面板被水平滚动隐藏，如何强制第一个面板采用所有可用宽度？

是否有任何纯 html/css 解决方案？

【问题讨论】：

标签： html css panel

【解决方案1】：

按照建议，使用display:table;，它将允许容器根据内容和超出窗口大小进行收缩/扩展。

但由于您还需要一个 overflow，您可以在其间添加一个额外的包装，以允许这些孩子超出窗口的宽度并匹配最宽的孩子，我给它 .buffer 作为一个类名来给它一些意思：

示例：

.list {
  overflow-x: auto;
}
.buffer {
  display: table;
}
.pane {
  border: 1px solid red;
  margin: 15px 0;
}
.pane .head {
  width: 100%;
  background: #959595;
}
.pane .body {
  width: 100%;
}
.pane .body table {
  border: 1px solid green;
}

<div class="list">
  <div class="buffer">
    <!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
    <div class="pane">
      <div class="head">
        Pane 1 header
      </div>
      <div class="body">
        Some body
      </div>
    </div>
    <div class="pane">
      <div class="head">
        Pane 2 header
      </div>
      <div class="body">
        <table width="100%">
          <tbody>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>content</td>
              <td>content</td>
              <td>content</td>
              <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/8cepsL09/6/

【讨论】：

哦。真的。非常感谢。

【解决方案2】：

它不是一个纯粹的 html/css 解决方案，但它可以工作

我使用 jquery 来获取第二个的宽度并将其应用于第一个

$('#pane1').width($('#pane2').width())

.list {
  overflow-x: auto;
}
.pane {
   border: 1px solid red;
   width: 100%;
   margin: 15px 0;
   display: table;
}

.pane .head {
  width: 100%;
  background: #959595;
}

.pane .body {
  width: 100%;
}

.pane .body table {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="pane" id="pane1">
    <div class="head">
      Pane 1 header
    </div>
    <div class="body">
      Some body
    </div>
  </div>
  <div class="pane" id="pane2">
    <div class="head">
      Pane 2 header
    </div>
    <div class="body">
      <table width="100%">
      <tbody>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
          <td>Fourth</td>
        </tr>
        <tr>
          <td>content</td>
          <td>content</td>
          <td>content</td>
          <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
        </tr>
      </tbody>
      </table>
    </div>
  </div>
</div>

您需要将 jquery 添加到您的站点并将 id 添加到您的窗格中（您可以使用其他方式访问您的窗格，但我发现 id 很容易）

【讨论】：

【解决方案3】：

您可以将其添加到您的 CSS 中

table {
   border-collapse:collapse; table-layout:fixed;
}
table td {
   border:solid 1px #fab; width:25%; word-wrap:break-word;
}

并根据列的数量调整宽度。

编辑：fiddle.js 此处

【讨论】：

【解决方案4】：

也可以玩一些类似的东西，例如

padding-right: 3000px;
margin-right: -3000px;

这将扩展元素使用的空间。详情请见https://www.sitepoint.com/css-extend-full-width-bars/...

【讨论】：