Question

我想用滚动条和动态宽度构建灵活的布局。

我有桌子宽度，窗户高度100％和自动宽度的2（3）列（宽度取决于它的内容）和剩余宽度的中心列。我无法指定列的确切宽度。

如果我的内容大于单元格宽度和高度，我想要水平和垂直滚动条;

示例1

示例2 这是LiveDemo

table-layout:fixed

我无法使用：

overflow:scroll - 因为列宽取决于它的内容

width,height

width:100%, max-width:100%, min-width:100%
我需要纯粹的css解决方案

我试过了：

white-space:wrap - 无法正常工作
div仅在内容为文字且仅有垂直滚动条

问题是：如何overflow:scroll overflow:auto或width,height拥有TD的父容器（在我的情况是<TD style="overflow:auto"></TD>）

P.S 最佳情况是 public ActionResult MyAction() { var myModel = new MyModel() {Email = Session['UserEmail'].ToString();} return View(myModel); }，宽度为自动。

Answer 1

找到第二个解决方案（更漂亮），它确实有效！

这里有关于stackoverflow的解决方案，说使用高度，宽度和溢出滚动将子div添加到td，但它们都不能使用动态宽度的单元格，所以我通过添加到稍微修改了解决方案div position:absolute并设置top,bottom,right,left to 0，并添加到父容器position:relative;

这是Live Demo 1

    <table border="1" width="100%" height="100%">
      <tr>
        <td> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </td>
        <td style="width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; ">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </td>
         <td> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </td>
        </tr>
    </table>

如果我们走得更远，更现代化（在没有桌子的生活中），就会这样：

这是Live Demo 2

    <ul style="width:100%; height:100%; display:table;">
        <li style="display:table-cell;"> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </li>
        <li style="display:table-cell; width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </li>
         <li style="display:table-cell;"> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </li>
    </ul>

Answer 2

找到（丑陋）解决方案，但它有效！

基本思想是用table-layout:fixed将可滚动内容包装在另一个表中，使外表具有动态宽度：）

这是Live Demo

  <table border="1" width="100%" height="100%">
    <tr>
      <td>
          <div style="width:200px">Left Menu</div>
      </td>
      <td style="width: 100%;">
          <table style="table-layout: fixed; width: 100%; height: 100%;">
          <tr><td>
              <div style="overflow:auto; width:100%; height:100%;">
                <div style="width:1000px; height:1000px; background:#f0f0f0;">Calendar</div>
              </div>
            </td>
          </tr>
          </table>
      </td>
       <td>
          <div style="width:300px">Right Menu</div>
      </td>
      </tr>
  </table>

如果您找到更好的解决方案，没有太多标记标记，欢迎在此发布...！

p.s我想我应该尝试使用display:table或flex来实现更优雅的解决方案

css溢出滚动表格单元格宽度：自动或宽度：100％

2 个答案: