所以我有这个小模态弹出窗口.它由2个部分组成;左和右.在两部分中都有上面的标签和下面的内容.标签固定在一定数量的像素,但是底部区域需要能够填充剩余的空间,所以我使用左侧和右侧的display：table和内部的table-cell来实现这个“填补剩余空间”效果.它在Chrome和Safari中效果很好：
http://hashtraffic.com(点击“尝试”,然后点击其中一个主题标签)
这是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和歌剧,#tagBoxLeft和#tagBoxRight两个部分拒绝接受高度：100％;而他们有显示：表.那么那么它不会强制反应性的底部.我有一个jsfiddle演示,可以在Firefox和Opera,所以我知道这是可能的：http://jsfiddle.net/Qxswa/但是为什么我的所有内容溢出在Firefox和Opera？
这是一个问题的屏幕截图：
http://cl.ly/G0iP
谢谢！
解决方法
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中工作(如果你关心的话).
