为什么我的显示器没有:table-cell元素填充可用空间？

Question

更新 - 我决定反对JavaScript解决方案.确保它始终有效的唯一方法是setInterval()每隔几秒就进行一次.不想那样做.我知道这个CSS是可能的,我看到它的工作原理.如果结束,我将重新打开奖金,更像是150.

---

我有一个模态弹出窗口由两部分组成:左和右.在这两个部分中都有上面的标签和下面的内容.标签固定在一定数量的像素上,但底部区域需要能够填充剩余空间,所以我在display:table左右两侧和display: table-cell内部使用以实现"填充剩余空间"效果.它在Chrome和Safari中运行良好.

这是CSS:

#tagBoxLeft,#tagBoxRight {
    display: table;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
    display: table-row;
    -webkit-border-top-left-radius: 20px;
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-box-shadow: 0 1px 0 #FFF;
    -moz-box-shadow: 0 1px 0 #FFF;
    box-shadow: 0 1px 0 #FFF;
}
.nano {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: table-cell;
}
#taglabel {
    display: table-row;
    z-index: 10000;
    border-top: 1px solid #FFF;
    width: 100%;
    height: 39px;
}

它只是将一堆div组成一个表,因此它们可以具有相对于彼此的高度.另请注意左侧和右侧是相对于浏览器窗口的,所以这就是为什么我不能只使用百分比.

然而,在Firefox和Opera中,#tagBoxLeft和#tagBoxRight双方部分拒绝接受height:100%;,而他们有display:table;.因此它不会响应性地强制底部部分.我知道Firefox和Opera通常支持这一点(参见http://jsfiddle.net/Qxswa/).但为什么我的所有内容都在Firefox和Opera中溢出？

这是该问题的屏幕截图:

Answer 1

这是使用display:tableand Friends 的替代方法，它使用经常被忽视的绝对定位元素的功能来设置其顶部和底部（以及左侧和右侧）值。它本质上是“粘住”顶部和底部边缘，为您提供相对于容器的高度，但无需显式设置高度。

\n\n

UDPATED：正如 Jackson 提到的，此代码的纯 CSS 版本不提供自动高度、列中的固定面板。一点简单的 JS 就可以解决这个问题 - 你只需要为没有 JS 的用户设置一个合理的默认高度。JS 仅需要在加载模态时运行，而不是每隔一段时间运行。

\n\n

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

\n\n

这是简化的 HTML：

\n\n

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

\n\n

和CSS：

\n\n

body {\n      background:#444;\n    }\n     #modal {\n       background:#FFF;\n       position: absolute;\n       top: 4em;\n       bottom: 4em;\n       left: 6em;\n       right: 6em;\n     }\n\n     #modal .left,\n     #modal .right {\n       position:absolute;\n       top: 0;\n       bottom: 0;\n     }\n\n     #modal .left {\n       background:#ACF9E4;\n       left: 0;\n       right:50%;\n     }\n\n     #modal .right {\n       background:#FCFFCD;\n       right: 0;\n       left:50%;\n     }\n\n     #modal .contents {\n      position:absolute;\n      top: 0;\n      bottom: 0;\n      width: 100%;\n      overflow-y:auto;\n     }\n\n     #modal .description {\n       height: 8em;\n     }\n\n     #modal .description + .contents {\n       top: 10em;\n   }\n\n     #modal .header,\n     #modal .description,\n     .contents li {\n       border-bottom:1px solid #CCC;\n       padding: 1em;\n     }\n\n     #modal .description dt {\n       float: left;\n       padding-right: 1em;\n     }\n

\n\n

这是一项非常有用且强大的技术。很多人一提到“绝对位置”都会感到不寒而栗，但这样使用，真是解放了！

\n\n

JS（假设是 jQuery）

\n\n

$(function(){\n    $(\'#modal\').on(\'display\', function(){\n        //Calculate the height of the top left panel, and provide the remaining space to the bottom left\n        var leftColumn = $(this).find(\'.left\'),\n            descriptionHeight = leftColumn.find(\'.description\').height(\'auto\').outerHeight(); //Set the height to auto, then read it\n\n        leftColumn.find(\'.contents\').css(\'top\', descriptionHeight)//Apply the height to the scrolling contents pane     \n    });\n\n    $(\'#modal\').trigger(\'display\');\n});\xe2\x80\x8b\n

\n\n

JS 将左上面板重置为自动高度，然后读取高度并将其应用为左下面板的顶部坐标。它作为自定义事件应用，因此您可以将其作为模式显示代码的一部分触发。

\n\n

这是我使用类似技术给出的答案，以及更多关于如何和为什么的解释：不可能的布局？。查看A 列表分离文章以获取更多讨论，以及一些使其在 IE6 中工作的简单修复（如果您关心的话）。

\n