如何使一个div适合所有可用的宽度，甚至隐藏滚动？ [英] How to make a div to fit all available width even hidden with scroll?

问题描述

我有两个面板的页面。第二个面板包含一些大表，所以即使包装内容也不能显示在全宽窗口上。比我添加了一个水平滚动来解决这个问题，但它似乎像div不希望适合大型表格大小。

小提琴链接

经过一番研究后，我发现如何强制第二个面板适合这个CSS变化的表大小：

  .pane {
 display：table; 
} 
  

更新的小提琴链接

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

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

解决方案

按照建议，使用 display：table; ，它将允许容器根据内容和窗口大小缩小/扩大。

但是因为您还需要 overflow ，您可以在两者之间添加一个额外的包装，以允许这些孩子超出窗口宽度并匹配到最广泛的一个，我给它 .buffer 作为类名给它一些含义：

示例：

  .list {overflow-x：auto;}。buffer {display ：table;}。pane {border：1px solid red; margin：15px 0;}。pane .head {width：100％;背景：＃959595;}。pane .body {width：100％;}。pane .body table {border：1px solid green;}  
 < div class =list> < div class =buffer> <！ - 这是一个缓冲区容器，如果显示为表元素，允许超出窗口的宽度*  - > < div class =pane> < div class =head> Pane 1 header< / div> < div class =body>某些机构< / div> < / DIV> < div class =pane> < div class =head> Pane 2 header< / div> < div class =body> < table width =100％> < TBODY> < TR> < TD>首先< / TD> < TD>第二个< / TD> < TD>第三< / TD> < TD>第四< / TD> < / TR> < TR> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < td> some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content< / td> < / TR> < / tbody的> < /表> < / DIV> < / DIV> < / div>< / div>  
 

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

I have a page with two panels. Second panel contains some large table so even with wrapped content it can't be displayed on full width window. Than I've added a horizontal scroll to fix this problem but it seems like div doesn't want to fit large table size.

Fiddle link

After some research I've found how to force second panel to fit the table size with this css change:

.pane {
  display: table;
}

updated fiddle link

But there is another issue. The width of first and second panels are different. How to force the first panel to take all avaliable width even if it hidden with horizontal scroll?

Is there any pure html/css solution for this?

解决方案

As advised, use display:table;, it will allow container to shrink/expand according to content and beyond window's size.

But since you need also an overflow, you may add an extra wrapper in between to allow those children to grow beyond the window's width and match to the widest one, i gave it .buffer as a classname to give it some meaning:

example:

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

这篇关于如何使一个div适合所有可用的宽度，甚至隐藏滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！