菜單表佔用了網頁的全部高度與CSS

Question

我有這張表包含鏈接。按下後，它會在同一頁面上顯示結果。我的問題是結果在菜單下面。我想用CSS來使桌子的高度佔據整個頁面。

這是表：

<div id="categories"> 
    <table> 
     <tr> 
      <th>Categories</th> 
     </tr> 
     <tr> 
      <td > 
       <ul> 
        <li><a href="categories.php?c=apts">Appetizers</a></br></li> 
        <li><a href="categories.php?c=brds">Breads</a></br></li> 
        <li><a href="categories.php?c=brek">Breakfast</a></br></li> 
        <li><a href="categories.php?c=cond">Condiments</a></br></li> 
        <li><a href="categories.php?c=dsrt">Desserts</a></br></li> 
        <li><a href="categories.php?c=drnk">Drinks</a></br></li> 
        <li><a href="categories.php?c=hmed">Homemade Ingredients</a></br></li> 
        <li><a href="categories.php?c=lnch">Lunch & Snacks</a></br></li> 
        <li><a href="categories.php?c=main">Main Dishes</a></br></li> 
        <li><a href="categories.php?c=psre">Pasta & Rice</a></br></li> 
        <li><a href="categories.php?c=slds">Salads</a></br></li> 
        <li><a href="categories.php?c=sauc">Sauces & Salsas</a></br></li> 
        <li><a href="categories.php?c=side">Side Dishes</a></br></li> 
        <li><a href="categories.php?c=stup">Soups & Stews</a></br></li> 
        <li><a href="categories.php?c=spcl">Special Diet</a></br></li> 
        <li><a href="categories.php?c=vegi">Vegitarian</a></br></li> 
        <li><a href="categories.php?c=diet">Weight Watchers</a></br></li> 
       </ul> 
      </td> 
     </tr> 
    </table> 
</div> 

目前我的CSS有：

div#categories{ 
    float: left; 
} 

我試圖給td的id並具有height: 100%;但什麼也沒做，以及剛剛給桌高100％或px。有沒有人有解決這個問題？

Answer 1

我相信這就是你要找的。

http://jsfiddle.net/XhcdB/

div#recipes{ 
    float: left; 
} 

div#pageMiddle{ 
    display: inline-block; 
} 

Answer 2

好的，所以你可以採取幾種方法。在這裏他們按照優先順序排列：

1. 把你所有的主要內容放在一個div中，並將其浮動。然後你的 nav會左移，內容正確。這是做現代佈局的最佳實踐方式。
2. 使用iframe - 如果可以使用iframe，請將內容 置於右側的iframe中。您的導航不會每次點擊重新加載，並且您的iframe內容可能會滾動，等等。 不是理想的解決方案，但可以工作。
3. 使用表格 - 您可以創建一個大型表格，該表格佔用整個 頁面，左側td中的nav和右側td中的內容。這 顯然是一個更老的和不是首選的方式來做到這一點，但它會 工作。