爲什麼我的顯示器：table-cell元素填充可用空間？

Question

更新 - 我決定反對JavaScript解決方案。確保它始終有效的唯一方法是每隔幾秒將其放入setInterval()。不想這樣做。我知道這個CSS是可能的，我已經看到它的工作。如果結束的話，我會重新打開更多的獎勵。

---

我有一個由兩部分組成的模式彈出：左和右。在這兩個部分中都是上面的標籤和下面的內容。標籤固定在一定數量的像素上，但底部區域需要能夠填充剩餘空間，所以我在左側和右側使用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:table和朋友，它採用了常被忽視的絕對定位元素的能力有替代都設置了它們的頂部和底部（以及左和右）值。它實質上是「頂住」頂部和底部邊緣，給你一個相對於容器的高度，但沒有明確設定高度。

UDPATED：正如Jackson所提到的，此代碼的僅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重置左上窗格來自動高度，然後讀取高度，並將其應用於作爲左下的頂部座標面板。它作爲自定義事件應用，因此您可以將其作爲模態顯示代碼的一部分觸發。

下面是我給出的一個答案，使用了類似的技巧，以及更多關於時間和日期的解釋：The Impossible Layout?。檢查列表除了文章更多的討論，以及一些簡單的修復，使它在IE6中工作（如果你關心的話）。

Answer 2

你可能想看看你是如何使用<section>。它與<div>不一樣。

W3C - Using HTML5 section elements和標題元素。

<header>看起來是一樣的。它們既是流程元素，也不是內容容器，而是內容容器的語義結構元素。

我使用了Firebug，並在預感上將<header>和<section>更改爲display:block。事情開始形成;但是我無法在這些更改後觸發滾動效果。然後，我將safari中的<header>更改爲display:inline。果然 - 我的兩個瀏覽器窗口是這樣的：

Answer 3

你需要有#tagboxleft和#tagboxright的溢出隱患。這可以通過將#tagbox設置爲overflow:hidden來完成，但是這會隱藏部分關閉按鈕。所以你需要另一個div左右包裹，但不包含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中運行。

Answer 4

是否有一個原因，你不能簡單地使用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 5

我打開你的網站在Firefox上，我看到與鉻的hashtag鏈接都沒有了。你現在正在做一些修復嘗試嗎？如果你把鏈接放回ff版本，我可以幫你調試。

UPDATE：

我看到的是顯示器的高度過於複雜的結構：表的並顯示：表細胞的絕對和靜態positionings以百分比計算的高度和許多其他高跨瀏覽器的揮發性混合物結合。

做大量的修補和修復我能得到這樣的：

有明顯的許多錯誤仍然存​​在，但至少你得到一些滾動條。

基本上，問題在於你依賴百分比高度和陰暗的桌面顯示，這些顯示看起來並不是很均勻地由不同的瀏覽器呈現。

這裏我們有兩種選擇：

1 .-保持你原有的CSS/HTML方法和故障排除JS滾動條。
2：走了很多很多更簡單的CSS/HTML變種

乾杯 摹