html – 显示“表格单元格”的元素将不会像表格单元格填充可用空

UDPATED：正如杰克逊提到的,此代码的CSS版本不提供列中的自动高度固定面板.一个简单的JS将修复这一点 – 您只需要为没有JS的用户设置一个明智的默认高度. JS只需要在加载模态时运行,而不是间隔.

这是更新的小提琴：http://jsfiddle.net/cxY7D/5

这里是简化的HTML：

<div id="modal">
      <div class="left">
          <div class="description">
            <h1>#tag_name</h1>
            <dl>
             <dt>Tags</dt> <dd>27</dd>
            </dl>
          </div>
          <div class="contents">
            <div class="header">            
              <h2>Featured</h2>
            </div>
            <ol>
              <li>Something Something</li>
              <li>...</li>
            </ol>
          </div>
      </div>
      <div class="right">
        <div class="contents">
          <div class="header">
            <h2>Recent</h2>
          </div>
          <ol>
            <li>Something Something</li>
            <li>...</li>
          </ol>
        </div>
      </div>
  </div>

和CSS：

body {
      background:#444;
    }
     #modal {
       background:#FFF;
       position: absolute;
       top: 4em;
       bottom: 4em;
       left: 6em;
       right: 6em;
     }

     #modal .left,#modal .right {
       position:absolute;
       top: 0;
       bottom: 0;
     }

     #modal .left {
       background:#ACF9E4;
       left: 0;
       right:50%;
     }

     #modal .right {
       background:#FCFFCD;
       right: 0;
       left:50%;
     }

     #modal .contents {
      position:absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      overflow-y:auto;
     }

     #modal .description {
       height: 8em;
     }

     #modal .description + .contents {
       top: 10em;
   }

     #modal .header,#modal .description,.contents li {
       border-bottom:1px solid #CCC;
       padding: 1em;
     }

     #modal .description dt {
       float: left;
       padding-right: 1em;
     }

这是一个非常有用和可靠的技术.当你提到“绝对位置”时,很多人会得到颤抖,但是像这样使用,这真的是解放了！

JS(假设是jQuery)

$(function(){
    $('#modal').on('display',function(){
        //Calculate the height of the top left panel,and provide the remaining space to the bottom left
        var leftColumn = $(this).find('.left'),descriptionHeight = leftColumn.find('.description').height('auto').outerHeight(); //Set the height to auto,then read it

        leftColumn.find('.contents').css('top',descriptionHeight)//Apply the height to the scrolling contents pane     
    });

    $('#modal').trigger('display');
});?

JS将左上角的窗格重置为自动高度,然后读取高度,并将其应用于左下方面板的顶部坐标.它被应用为自定义事件,因此您可以将其作为模态显示代码的一部分进行触发.

这是我给出的一个答案,使用类似的技术,以及更多关于hows和whys的解释：The Impossible Layout?.检查一个列表分开的文章,以进行更多的讨论,以及一些简单的修复,使其在IE6中工作(如果你关心的话).