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＆amp; Opera通常支持此功能（请参阅http://jsfiddle.net/Qxswa/）。但为什么我的所有内容都在Firefox和Opera中溢出？

以下是该问题的屏幕截图：

Answer 1

您是否有理由不能简单地使用JavaScript来计算正确的高度并将其应用于内联？它并不那么简单，但对于你所描述的内容来说，这将是微不足道的。

var boxHeight = $('#tagBox').height();
var leftLabelHeight = $('#tagBoxDescription').height();
$('#tagBoxPopular').css('height', boxHeight - leftLabelHeight + 'px');

var rightLabelHeight = $('#taglabel').height();
$('#tagBoxStream').css('height', boxHeight - rightLabelHeight + 'px');

Answer 2

我在firefox上打开你的网站，我看到的chrome标签链接都没了。你现在正在做一些修复尝试吗？如果你把链接重新放入ff版本，我可以帮你调试。

更新：

我看到的是一个高度过于复杂的显示组合：表格和显示：表格单元格具有绝对和静态定位以及百分比高度和许多其他高度跨浏览的易失性混音。

做了很多修补和修复我能够得到这个：

screenshot of patched up version under firefox

显然还有很多错误，但至少你会得到一些滚动条。

基本上，问题在于您依赖于百分比高度和阴暗的桌面显示，这些显示看起来不是由不同浏览器非常均匀地呈现。

我们在这里有两个选择：

1.-保留原始的css / html方法并对JS滚动条进行故障排除 2.-寻找一个更简单的css / html变体

干杯 ģ

Answer 3

这是使用display:table和朋友的替代方法，它使用绝对定位元素的经常忽略的能力来两个它们的顶部和底部（以及左和右）值集。它基本上“粘住”顶部和底部边缘，为您提供相对于容器的高度，但没有明确设置高度。

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?。查看 A list apart 文章以获得更多讨论，以及一些使其在IE6中工作的简单修复（如果您关心它）。

Answer 4

您可能希望了解如何使用<section>。它与<div>不同。

W3C - Using HTML5 section elements和标题元素。

<header>看起来是一样的。它们既是流元素，也不是内容容器，而是内容容器的语义结构元素。

我使用了Firebug，并在预感中将<header>和<section>更改为display:block。事情开始形成;但是在这些变化之后我无法触发滚动效果。然后我将Safari中的<header>更改为display:inline。果然 - 我的浏览器窗口看起来像这样： enter image description here

Answer 5

您需要隐藏#tagboxleft和#tagboxright的溢出。这可以通过将#tagbox设置为overflow:hidden来完成，但这会隐藏关闭按钮的一部分。所以你需要左右两边的另一个div，而不是x overflow:hidden。

像这样：

<div id="tagbox">
    <div id="tagboxX"></div>
    <div id="tagboxleftright" style="overflow:hidden"> <!-- This is the wrapper div around tagbox left & right. Of course, move overflow:hidden to the style sheet -->
        <div id="tagboxLeft"></div>
        <div id="tagboxRight"></div>
    </div>
</div>

这适用于Firefox，它应该可以在Internet Explorer中使用。

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

5 个答案: